v-treeview 只允许 select 一个值并获取 selected 值的 ID

Question

v-treeview 通过使用 selectable 属性允许 select 多个值。

<v-treeview
    selectable
    :items="items"
></v-treeview>

我一次只需要 select 整棵树中的一个值，并获取 selected 值的 ID。我该怎么做？

使用 activatable 属性允许 select 一件物品。但无法通过 v-model

获取价值

Answer 1

@Buddhika Priyabhashana，可以从 vuetify 中的可激活树视图中获取活动值，您只需使用事件 @update:active 即可获取该值当前选择

请查找以下代码：

<div id="app">
  <v-app id="inspire">
    <v-treeview
      activatable
      :items="items"
      @update:active="getActiveValue"
    ></v-treeview>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
     getActiveValue(value){
       console.log(value)
     }
  },
  data: () => ({
    items: [
      {
        id: 1,
        name: 'Applications :',
        children: [
          { id: 2, name: 'Calendar : app' },
          { id: 3, name: 'Chrome : app' },
          { id: 4, name: 'Webstorm : app' },
        ],
      },
      {
        id: 5,
        name: 'Documents :',
        children: [
          {
            id: 6,
            name: 'vuetify :',
            children: [
              {
                id: 7,
                name: 'src :',
                children: [
                  { id: 8, name: 'index : ts' },
                  { id: 9, name: 'bootstrap : ts' },
                ],
              },
            ],
          },
          {
            id: 10,
            name: 'material2 :',
            children: [
              {
                id: 11,
                name: 'src :',
                children: [
                  { id: 12, name: 'v-btn : ts' },
                  { id: 13, name: 'v-card : ts' },
                  { id: 14, name: 'v-window : ts' },
                ],
              },
            ],
          },
        ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [
          { id: 16, name: 'October : pdf' },
          { id: 17, name: 'November : pdf' },
          { id: 18, name: 'Tutorial : html' },
        ],
      },
      {
        id: 19,
        name: 'Videos :',
        children: [
          {
            id: 20,
            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' },
        ],
      },
    ],
  }),
})

Please find the working codepen here: https://codepen.io/chansv/pen/WNRxWXK?editors=101

v-treeview 只允许 select 一个值并获取 selected 值的 ID

v-treeview allow select only one value and get ID of selected value

vue.js

treeview

vuetify.js

v-model