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

Question

v-treeview allows to select multiple values by using selectable prop.

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

I need to select only one value at a time from whole tree and get ID of selected value. How can i do that?

with activatable prop it allows to select one item. but cannot get value through v-model

Answer 1

@Buddhika Priyabhashana, It is possible to get the active value from an activatable treeview in vuetify, all you need is to use the event @update:active to get the value of current selection

Please find the code below:

<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