CODEWITHSUNDEEP
javascriptvue.jsv-select
CaPiTo26
CaPiTo26

Reputation: 57

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

I have this v-select :

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

When I get the attribute of my function "changed", I got an array with all selected values when I add or remove an item from my v-select.

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

I don't want to get all the array but only the selected/removed value. Is there any way to get the selected value?

Thanks.

Upvotes: 0

Views: 3955

Answers (2)

CaPiTo26
CaPiTo26

Reputation: 57

Wow! It works! Thank you!

For those who have the same request, don't forget to fill your previousSelectedStructures up with the existing content :

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

Upvotes: 0

Raby&#226; Raghib
Raby&#226; Raghib

Reputation: 154

One of the ways to achieve what you want is store the previous value in variable then compare the new value with it

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;
}

Upvotes: 1

Related Questions