Vue组件访问数据对象

时间:2016-04-21 13:24:38

标签: vue.js vue-component

如何检查对象是否在计算属性中包含子元素 EX。 https://jsfiddle.net/zvku6voo/

我需要在点击,加载页面上检查子菜单功能并传递默认打开子菜单,如何在子菜单功能上访问当前对象?

HTML和模板:                    

<template id="ids-sidebar-menu-template">
    <li v-for="li in list" >
        <a href="@{{ li.url }}" @click="toggle" >
            @{{li.title}}
            <span v-if="submenu" class="right"> + </span>
        </a>
        <ul v-show="open" v-if="submenu">
            <ids-sidebar-menu :list="li.children"></ids-sidebar-menu>
        </ul>
    </li>
</template>   

Vue组件:

Vue.component('ids-sidebar-menu', {
    template : '#ids-sidebar-menu-template',
    props: {
        list : Array
    },
    data: function () {
        return {
            open: false
        }
    },
    computed: {
        submenu: function () {
                return true;
                // problem here
            return this.children && this.children.length
        }
    },
    methods: {
        toggle: function (e) {
            e.preventDefault();
            if (this.submenu)
                this.open = !this.open
        }
    }
});

数据:

var data = [
    {
        title : 'Title 1',
        url : '#',
        children: [
            {
                title : 'Subtitle 1',
                url : '#'
            },
            {
                title : 'Subtitle 2',
                url : '#'
            },
            {
                title : 'Subtitle 3',
                url : '#'
            }
        ]
    },
    {
        title : 'Title 2',
        url : '#'
    }
];

Vue的:

var vm = new Vue({
    el : '#sidebar-menu',
    data: {
        links: data
    }
});

1 个答案:

答案 0 :(得分:0)

问题是您将整个列表传递给每个<ids-submenu-item>组件。每个子菜单项组件只应传递它需要显示的项目,而不是所有链接。工作小提琴:https://jsfiddle.net/zvku6voo/2/

<ul id="sidebar-menu">
    <ids-sidebar-menu v-for="item in links" :line="item"></ids-sidebar-menu>
</ul>

<template id="ids-sidebar-menu-template">
    <li>
        <a href="{{ line.url }}" @click="toggle" >
            {{line.title}}
            <span v-if="submenu" class="right"> + </span>
        </a>
        <ul v-show="open" v-if="submenu">
            <ids-sidebar-menu v-for="item in line.children" :line="item"></ids-sidebar-menu>
        </ul>
    </li>
</template>

JS:

props: {
        line : Object
    },
    data: function () {
        return {
            open: false
        }
    },
    computed: {
        submenu: function () {
            return this.line.children && this.line.children.length
        }
    },