Vuetify v-treeview 如何获取最后一个选定的元素?

Question

Vuetify v-treeview 如何获取最后选定的元素？

<v-treeview
   v-model="treeModel"
   :items="items"
   selectable="selectable"            
>

通过树模型我都选择了，但是我怎么能只选择最后一个项目(单击(？

Answer 1

只需在v-model中提供最后一项的 ID

从 https://vuetifyjs.com/en/components/treeview#checkbox-color 修改的示例

选项 1 - 使用 V-on/@on 更新：活动

** 目前不适用于 VUETIFY v2 **

<div id="app">
  <v-app id="inspire">
    <v-treeview
      v-model="selection"
      selectable
      selected-color="red"
      :items="items"
      @update:active="onUpdate"
    ></v-treeview>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selection: [],
    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: 'Calendar.doc' },
          { id: 7, name: 'Chrome.doc' },
          { id: 8, name: 'Webstorm.doc' },
        ],
      },
    ],
  }),
  methods: {
    onUpdate(selection) {
      console.log(selection)
    }
  }
})

问题是，如果您使用的是 Vuetify v2.0.0 - v2.0.5，则该操作实际上不适用于选择，而是适用于可激活

## option 2 - use watch
this option, at the moment, is preferred. It uses a watch to trigger the action when the `v-model` changes
```html
<div id="app">
  <v-app id="inspire">
    <v-treeview
      v-model="selection"
      :items="items"
      selectable
    ></v-treeview>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  watch:{
    selection(newValue) {
      this.onUpdate(newValue)
    }
  },
  data: () => ({
    selection: [],
    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: 'Calendar.doc' },
          { id: 7, name: 'Chrome.doc' },
          { id: 8, name: 'Webstorm.doc' },
        ],
      },
    ],
  }),
  methods: {
    onUpdate(selection) {
      console.log(selection)
    }
  }
})

如果要查找最后选择的项目，可以在此处使用数组差异

  watch:{
    selection(newValue, oldVal) {
      var arrDiff = myArrDiffDependency.added(newValue, oldValue)
      this.onUpdate(arrDiff)
    }
  },

Answer 2

  watch: {
    selection() {
      if (this.items.length > 1) {
        this.items.shift();
      }
    },
  },

伊斯托解决