2

オブジェクトが計算されたプロパティ 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.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 : '#'
    }
];

ビュー:

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

1 に答える 1

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
        }
    },
于 2016-04-21T13:47:56.667 に答える