vuetifyのv-treeviewで、nodeごとにopen-on-clickのtrue/falseを設定する方法

Question

vuetifyのv-treeviewで、nodeごとにopen-on-clickのtrue/falseを設定する方法が知りたいです。

デフォルトで開きたいわけではなく、クリックしたときにnodeを開きたいです。
下記コードでいうと、id:19はnode全体をクリックすれば開き、id:20は左端の「▼」をクリックしないと開かないという設定をしたいというのが今回の要件です。

<template>
  <v-treeview :items="items" open-on-click></v-treeview>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          id: 19, // open-on-clickをtrueにしたい
          name: 'Videos :',
          children: [
            {
              id: 20, // open-on-clickをfalseにしたい
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' },
              ],
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' },
          ],
        },
      ]
</script>

Answer 1

https://vuetifyjs.com/ja/components/treeview/#append3068label
ここら辺の例がわかりやすいですが、APIにopen propsが存在してます。
item-keyをnameにした場合、openにデフォルトで開きたいitemのname配列を渡す感じです。

cssを使えば以下のようにそれっぽいことはできるとは思います。

Comments

[963]

回答ありがとうございます。
要件としては、open-on-clickのtrue/falseをnode別に設定するといものです。
デフォルトで開きたいわけではなく、node全体をクリックして開きたいitemとnode左端の「▼」をクリックしたときのみ開きたいitemがあるので、そこの設定方法が知りたいという質問内容になります。

[zushi0905]

すみません。質問流し読みしてました。
回答を修正した通り、cssのpointer-eventsを使えばできるかもしれませんが、v-treeview-nodeあたりにtrue/false識別用のクラスを付与しないと出しわけができないので、そこらへんの調査をしないといけないです。

ぱっと見だとないので、できるか微妙な線ですね。要件の方で折れてもらうのが一番幸せそうで、どうしてもなら自作した方が早そうな感じがあります。

[963]

説明ありがとうございます。
v-treeviewの基本的な機能で実装ができないと割り切ることができただけでも良しとします。
ありがとうございました。