Question

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

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

我已经全部选择了treeModel，但是如何仅获取（单击）最后选择的项目？

Answer 1

通过仅在v-model

中提供最后一项的ID

来自https://vuetifyjs.com/en/components/treeview#checkbox-color

的修改示例

选项1-使用v-on / @ on更新：有效

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

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

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

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

1 个答案:

选项1-使用v-on / @ on更新：有效