萧萧风 2022-08-31 17:00 采纳率: 50%
浏览 1094
已结题

vue3 组件报错Uncaught (in promise) TypeError: Cannot read properties of undefined

报错位置

img

去掉v-if="m.meta.noMenu" 不报错,下面的m.meta.noMenu正常显示值

组件全部代码

<template>
    <div :class="['py-4 flex flex-col bg-indigo-100 relative lg:flex lg:rounded-b-sm', !menuSwitch?'flex':'hidden']">
        
        <div v-for="(m,i) in menus" v-if="m.meta.noMenu"
            :class="['flex flex-row items-center pl-[20px] space-x-3 hover:bg-gray-100 text-sm leading-[45px]',currRoute==m.name?'bg-gray-100':'']"
            @click="clickMenu(m.name,i)">
            <SvgIcon :name="m.meta.icon" class="w-[20px] h-[20px]" />
            
            <div>{{m.meta.title}}</div>
            {{m.meta.noMenu}}
            <SvgIcon name="right" class="w-[20px] h-[20px] absolute right-2" v-show="currRoute==m.name" />
        </div>
    </div>
</template>

<script setup>
    import {
        ref,
        reactive
    } from 'vue'
    import {
        useRoute,
        useRouter
    } from 'vue-router'
    import mu from '../router/menu/menu.js'
    //reactive:定义响应式变量,一般用于定义引用数据类型。如果是基本数据类型,建议使用ref来定义。
    var menus = reactive(mu);
    defineProps({
        menuSwitch: Boolean
    })
    const route = useRoute()
    const router = useRouter()
    console.log(JSON.stringify(route.name))
    var currRoute = ref(route.name);
    const clickMenu = (rt, i) => {
        console.log(rt)
        router.push({
            name: rt
        });
        currRoute.value = rt
    }
</script>

<style>
</style>



  • 写回答

4条回答 默认 最新

  • 关注

    v-if 与 v-for 不要一起使用,优先级问题会导致 v-if 拿不到对应的值

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 9月8日
  • 已采纳回答 8月31日
  • 创建了问题 8月31日

悬赏问题

  • ¥15 vue3+element-plus页面崩溃
  • ¥15 像这种代码要怎么跑起来?
  • ¥15 怎么改成循环输入删除(语言-c语言)
  • ¥15 安卓C读取/dev/fastpipe屏幕像素数据
  • ¥15 pyqt5tools安装失败
  • ¥15 mmdetection
  • ¥15 nginx代理报502的错误
  • ¥100 当AWR1843发送完设置的固定帧后,如何使其再发送第一次的帧
  • ¥15 图示五个参数的模型校正是用什么方法做出来的。如何建立其他模型
  • ¥100 描述一下元器件的基本功能,pcba板的基本原理