v-treeview 允许只选择一个值并获取所选值的 ID

Question

v-treeview 允许使用selectable prop 选择多个值。

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

我一次只需要从整棵树中选择一个值并获取所选值的 ID。我该怎么做？

使用activatable 道具，它允许选择一项。但无法通过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' },
        ],
      },
    ],
  }),
})

请在此处找到有效的 codepen： https://codepen.io/chansv/pen/WNRxWXK?editors=101