Question

Vue.component('navmenu', {
    props: ['menu'],
    template: '<li><a :href="menu.url">{{ menu.name }}</a></li>'
})

Vue.component('navmenu-dropdown', {
    props: ['dropdownlist'],
    template: '<li>\
        <a href="" class="dropdown-toggle" data-toggle="dropdown">{{ dropdownlist.name }}<b class="caret"></b></a></li>'
})

以上是我的父组件。第二个组件navmenu-dropdown 下面有一个子组件。

Vue.component('navmenu-dropdown-li', {
    props: ['dropdownmenu'],
    template: '<ul class="dropdown-menu"> <li><a :href="dropdownmenu.url"> {{dropdownmenu.name}} </a></li> </ul>'
})

以下是我显示组件的HTML代码。

<ul class="nav navbar-nav" id="navbar-ul">
            <navmenu v-for="item in navlist" v-if="item.class != 'dropdown'" v-bind:menu="item"></navmenu>
            <navmenu-dropdown v-else v-bind:dropdownlist="item">
                    <navmenu-dropdown-li v-for="itemli in item.menus"
                                         v-bind:dropdownmenu="itemli"></navmenu-dropdown-li>

            </navmenu-dropdown>
        </ul>

我正在尝试迭代以下格式的json对象：

var app = new Vue({
    el: '#navbar-ul',
    data: {
        navlist: [
            {
                "name": "NJ Portal",
                "url": "/AG_ECAS/ecasHome",
                "class": ""
            },
            {
                "name": "SNEARS Home",
                "url": "/AG_ECAS/ecasHome",
                "class": "dropdown",
                "menus": [
                    {
                        "name": "USDA Memos",
                        "url": "/AG_ECAS/ecasHome",
                        "class": "dropdown"
                    },

                    {
                        "name": "Message from NJDA",
                        "url": "/AG_ECAS/ecasHome",
                        "class": "dropdown"
                    }
                ]
            }
         ]
    }
})

我能看到像NJ Portal和SNEARS Home这样的主要列表子列表没有显示。任何帮助将不胜感激。

Answer 1

由于v-if/else，您似乎收到了错误，因为第二个元素的v-if为false，请尝试关注代码，<navmenu>应该包含{ {1}}：

navmenu-dropdown

使用VueJS

1 个答案: