有条件地在组件 vue 上调用属性？

Question

我有一个元素列表，其中可能包含元素的子集，所以我有一个这样的列表

<v-list>
    <v-list-group v-for="item in items" :key="item.id>
        <v-list-title :to="item.link">
            {{ item.title }}
        </v-list-title>
    </v-list-group>
</v-list>

而我的items 数组是这样的。

data: function() {
    return {
        items[
            {
                id: 1,
                title: 'foo',
                link: '/dashboard/url/',
                items: []
            },
            {
                id: 2,
                title: 'bar',
                link: '/dashboard/url2/',
                items: [
                    {
                        id: 1,
                        title: 'foo',
                        link: '/dashboard/url/sub'
                    }
                ]
            }
        ]
    }
}

我只想在item.items.length > 0 时才将属性:to 添加到列表中，有没有办法动态添加属性？还是有条件地添加？

Answer 1

你可以在这里使用条件

<v-list-title :to="item.items.length ? item.link : null">
  {{ item.title }}
</v-list-title>