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

通过只提供最后一个项目的 id v-model

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

选项 1 - 使用 v-on/@on update:active

** 目前不适用于 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)
    }
  },