vue 2단계 메뉴 표시 또는 숨기기

1824 단어 vue
장면: 2단계 메뉴는 html로 죽은 것이지 data와 v-for를 통해 동적으로 생성된 것이 아니다.
오늘 실현하는 과정에서 문제가 생겼다.실현 방향은 다음과 같다. 데이터에서 설정menuIsShow은 하나의 수조이고, 수조의 요소는 boolean값으로 1급 메뉴가 표시되거나 숨겨졌는지 여부를 나타낸다.html에서 대응하는 2급 메뉴 요소에 귀속menuIsShow의 값, 예를 들어:class="{showItem:menuIsShow[0]}", 그리고 대응하는 1급 메뉴 요소에 귀속 이벤트 변화menuIsShow의 값, 즉@click="menuIsShow[0] = !menuIsShow[0]"브라우저에서 1급 메뉴를 클릭하면 오류가 없고 대응하는 2급 메뉴도 펼쳐지지 않았지만 vue Devtools를 통해 1급 메뉴를 클릭할 때마다 대응하는 menuIsShow가 바뀌지 않고 구성 요소를 리셋하면 menuIsShow의 값이 바뀌는 것을 관찰했다.
따라서 페이지에 연결된 수조가 변화한 후에 페이지는 구성 요소를 새로 고쳐야 수조의 값이 변화하는 것을 관찰할 수 있다는 결론을 얻었다.vue 흰둥이는 당분간 왜 그런지 모르겠지만 대상을 사용하면 이 문제를 해결할 수 있을 것 같아서 과연 이루어졌다.다음은 구현된 코드입니다.
//    
시스템 관리
//    


      

                
      

      

                
       

       

                
       

 

 //    
 시스템 모니터링
 //    


   

       시스템 로그
   

   

        인터페이스api
   

   

        시스템 모니터링
   

   

        타이밍 태스크
    




data(){
    return {
      subMenuIndex:'',
      menuIsShow:{menuOne:false,menuTwo:false}
    }
  }
소켓 비동기 연결
[LeetCode]165 Compare Version Numbers

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage