场景:二级菜单用html写死的,而不是以通过datav-for动态生成的

今天在实现的过程中,出现了问题。实现思路如下:
data中设置menuIsShow为一个数组,数组的元素为boolean值,表示一级菜单是否显示或隐藏。
在html中对应的二级菜单元素上绑定menuIsShow的值,如:class="{showItem:menuIsShow[0]}",然后在对应的一级菜单元素上绑定事件改变menuIsShow的值,即@click="menuIsShow[0] = !menuIsShow[0]"

在浏览器中,点击一级菜单,无报错,对应的二级菜单也没展开,但是通过vue Devtools观察到,每点击一次一级菜单,对应的menuIsShow没有改变,刷新一下组件,menuIsShow的值才会改变。

于是,得出结论,页面中绑定的数组发生变化后,页面需要刷新组件才能观察到数组的值发生变化。
vue小白暂时不知道这是为什么,但是感觉使用对象就可以解决这个问题,果然实现了。以下是实现的代码:

//一级菜单
<a  @click="menuIsShow.menuOne = !menuIsShow.menuOne"><span>系统管理</span></a>
//二级菜单
<dl class="layui-nav-child"  :class="{layui_nav_itemed: menuIsShow.menuOne}">
      <dd>
            <router-link to="/menuManage">菜单管理</router-link>
      </dd>
      <dd>
            <router-link to="/userManage">用户管理</router-link>
       </dd>
       <dd>
            <router-link to="/roleManage">角色管理</router-link>
       </dd>
 </dl>
 //一级菜单
 <a @click="menuIsShow.menuTwo = !menuIsShow.menuTwo"><span>系统监控</span></a>
 //二级菜单
<dl class="layui-nav-child" :class="{layui_nav_itemed: menuIsShow.menuTwo}">
   <dd>
       <a ><span>系统日志</span></a>
   </dd>
   <dd>
        <a ><span>接口api</span></a>
   </dd>
   <dd>
        <a ><span>系统监控</span></a>
   </dd>
   <dd>
        <a ><span>定时任务</span></a>
    </dd>
</dl>
data(){
    return {
      subMenuIndex:'',
      menuIsShow:{menuOne:false,menuTwo:false}
    }
  }
Logo

前往低代码交流专区

更多推荐