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

Question

报错位置

去掉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>

Answer 1

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