如何在 <v-select> 多个 vuejs 中获取 selected/removed 值

Question

我有这个 v-select :

<v-select
    multiple
    v-model="group.structures"
    :options="filter"
    label="name"
    @input="changed"
></v-select>

当我得到我的函数的属性“改变”时，当我从我的 v-select.[=14 中添加或删除一个项目时，我得到了一个包含所有 selected 值的数组=]

changed(value) {
    console.log(value); // Return an array with all items in (group.structures).
}

我不想获取所有数组，而只想获取 selected/removed 值。有什么方法可以得到 selected 值吗？

谢谢。

Answer 1

实现您想要的方法之一是将先前的值存储在变量中，然后将新值与其进行比较

data() {
  return {
    previousSelectedStructures: [];
    // ...
  }
}

changed(value) {
    let added = value.filter(
      (val) => !this.previousSelectedStructures.includes(val)
    );
    let removed = this.previousSelectedStructures.filter(
      (val) => !value.includes(val)
    );

    // Do some stuff

    console.log(value);
    this.previousSelectedStructures = value;
}

Answer 2

像下面的片段一样尝试：

new Vue ({
  el: '#demo',
  vuetify: new Vuetify(),
  data() {
    return {
      group: {
        structures: []
      },
      filter: [1,2,3,4,5,6,7],
      selected: []
    }
  },
  methods: {
    changed(value) {
      let item = null
      if(value.filter(val => !this.selected.includes(val)).length){
        item = 'Added: ' + value.filter(v => !this.selected.includes(v)).toString()
      } else {
        item = 'Removed: ' + this.selected.filter(v => !value.includes(v)).toString()
      }
      this.selected = value;
      console.log(item);
    }
  }
})
Vue.config.productionTip = false
Vue.config.devtools = false

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  
<div id="demo">
  <v-app>
    <v-select
      multiple
      v-model="group.structures"
      :items="filter"
      label="name"
      @input="changed"
    >
    </v-select>
  </v-app>
</div>

Answer 3

哇！有用！谢谢！

有相同要求的朋友，不要忘记用现有内容填充您的previousSelectedStructures :

created(){
        this.previousSelectedStructures = this.group.structures;
    },

如何在 <v-select> 多个 vuejs 中获取 selected/removed 值

How to get selected/removed value in <v-select> multiple vuejs

javascript

vue.js

v-select