Vue.js v-treeview仅允许选择一个值并获取所选值的ID

v-treeview允许使用可选道具选择多个值

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

使用可激活道具，可选择一个项目。但无法通过v模型获得价值

---

@Buddhika Priyabhashana，可以从vuetify中的可激活树视图中获取活动值，您只需使用event@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' },
        ],
      },
    ],
  }),
})

请在此处找到工作代码笔：

---

嗨，chans，你的回答真的很有帮助。除此之外，你能建议一种避免从树中选择父母的方法吗？@BuddhikaPriyabhashana，代码笔已更新，以避免从树中选择父母，这是更新的代码笔。如果这能解决你的问题，请告诉我你就是男人！！：我从你的回答中得到了线索。非常感谢。

<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' },
        ],
      },
    ],
  }),
})