vue component 使用v-for变量未定义的问题

Question

问题描述

vue component 使用v-for变量未定义

问题出现的环境背景及自己尝试过哪些方法

代码不放在component是可以用的...

相关代码

组件代码

<template v-for="item in items">
    <Submenu v-if="item.hasOwnProperty('list')" :key="item.title" :name="item.title">
        <template slot="title">
            {{item.title}}
        </template>
        <MenuItem v-for="i1 in item.list" :key="i1" :name="i1">{{ i1 }}</MenuItem>
<!--        <MenuItems :items="item.list"></MenuItems>-->

    </Submenu>
    <MenuItem v-else-if="typeof item === 'string'" :name="item" style="padding: 14px 24px;" :key="item">{{ item }}</MenuItem>
    <MenuItem v-else-if="typeof item === 'string'" :name="item.title" style="padding: 14px 24px;" :key="item.title">{{ item.title }}</MenuItem>
</template>

<script>
    export default {
        name: "MenuItems",
        props: {
            items: {
                required: true
            }
        }
    }
</script>

调用代码

<MenuItems :items="menu_items1"></MenuItems>
menu_items1: [
                    {
                        title: '标题1',
                        list: ['子栏目',
                            '子栏目',
                            '子栏目']
                    },{
                        title: '标题2',
                        list: ['子栏目',
                            '子栏目',
                            '子栏目']
                    }

报错内容

Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

v-for 不要放在 template 上试试

Answer 2

加个v-if="item.list"