javascript - 添加指向 Vuetify 树视图的链接

Question

我使用 vuetify 的 treeview 组件，我希望每个节点中的最后一个子节点成为路由器链接，有人知道如何实现吗？

即使我可以绑定一个对我有用的@click 事件。

我在文档或示例中看不到如何执行此操作。

这是我的组件的样子：

<template>
    <div>
       <v-treeview :items="items"></v-treeview>
    </div>
</template>

<script>
    export default {
        data: () => ({
            items: [
                {
                    name: 'Parent',
                    children: [
                        {
                            name: 'Child1',
                            to:'booking' // <---I want to put a router link here or click event handler
                        }
                    ]
                }
            ]
        })
    }
</script>

标签： javascriptvue.jsvuetify.js

Answer 1

您需要为标签使用范围插槽：

<template>
    <div>
        <v-treeview :items="items">
            <template slot="label" slot-scope="props">
                <router-link :to="props.item.to">{{ props.item.name }}</router-link>
            </template>
        </v-treeview>
    </div>
</template>

您还应该确保显示to没有链接的属性的数据。你可以使用一个简单v-if的：

<template>
    <div>
        <v-treeview :items="items">
            <template slot="label" slot-scope="props">
                <router-link :to="props.item.to" v-if="props.item.to">{{ props.item.name }}</router-link>
                <span v-else>{{ props.item.name }}</span>
            </template>
        </v-treeview>
    </div>
</template>