Vuetifyツリービューへのリンクを追加する

debugcn 投稿 Dev

ブラッド

vuetifyのツリービューコンポーネントを使用していて、各ノードの最後の子をルーターリンクにしたいのですが、これを実現する方法を知っている人はいますか？

@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>

ハンマーボット

ラベルにはスコープ付きスロットを使用する必要があります。

<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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]