vue使用iview导航栏Menu activeName不生效

记录一下使用iview-Menu遇到的一个问题
使用iview使用导航栏组件Menu 导航菜单
当我们需要默认选择内容为
vue使用iview导航栏Menu activeName不生效_第1张图片
我们知道 当我们需要在进入页面时或使用数据来驱动该视图时会遇到无法使用 失效的问题

<Menu ref="side_menu" :theme="theme3" :active-name="activeName">
        <MenuGroup title="内容管理">
          <MenuItem name="1">
          <Icon type="md-document" />
          文章管理
          </MenuItem>
          <MenuItem name="2">
          <Icon type="md-chatbubbles" />
          评论管理
          </MenuItem>
        </MenuGroup>
          <MenuItem name="3">
          <Icon type="md-heart" />
          用户留存
          </MenuItem>
          <MenuItem name="4">
          <Icon type="md-leaf" />
          流失用户
          </MenuItem>
 </Menu>
data: function() {
      return {
        activeName: '3'
      }
    },

此时我们会发现我们的代码无法生效 activeName无法正常去驱动这个视图

解决办法
在mounted方法中重新载入

mounted() {
      this.$nextTick(() => {
        this.$refs.side_menu.updateOpened();
        this.$refs.side_menu.updateActiveName();
      })
}

你可能感兴趣的:(vue使用iview导航栏Menu activeName不生效)