Vue组件访问数据对象-Java 学习之路

如何检查对象是否在计算属性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 回答

问题是您将整个列表传递给每个 <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
        }
    },

回复于 2024-04-29T00:00:37+08:00

Vue组件访问数据对象

1 回答

相关问题