Vue3.0中：TypeError: Cannot read properties of undefined (reading ‘hidden‘)

最新推荐文章于 2024-11-27 11:01:33 发布

原创最新推荐文章于 2024-11-27 11:01:33 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue3.0中遇到TypeError: Cannot read properties of undefined (reading 'hidden')的问题，原因是v-if在3.x版本总是先于v-for执行。当v-if条件未满足时，v-for的内容还未被遍历，导致错误。为了解决这个问题，可以改用计算属性来处理条件渲染。

部署运行你感兴趣的模型镜像

1、问题

<el-submenu index="1" v-for="(item,index) in this.$router.options.routes" :key="index" v-if="item.hidden">

报错：TypeError: Cannot read properties of undefined (reading ‘hidden’)

2、原因
3.x 版本中 v-if 总是优先于 v-for 生效。所有v-if还没有遍历出v-for内容

链接: link.

4、解决：使用计算属性

<el-menu router>
  <el-submenu index="1" v-for="(item,index) in activeRoute" :key="index">
    <template v-slot:title="title">
      <i class="el-icon-location"></i>
      <span>{{ item.name }}</span>
    </template>
    <el-menu-item-group>
      <el-menu-item :index="children.path" v-for="(children,index) in item.children">
        {{ children.name }}
      </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>


computed: {
    activeRoute: function () {
      return this.$router.options.routes.filter(function (routes) {
        return routes.hidden
      })
    }
  },