vue.js - V-select in Datatable onchange cannot pass the value

Question

Is that possible to pass the item value and select value when changing the v-select value?

<template #item.progress="{ item }">
    <div>
        <v-select
            :items="list"
            label="status"
            :model="item.progress"
            @change="changeProgress(item)"
        ></v-select>
    </div>
</template>

methods: {
    changeProgress(item) {
        console.log(item);
        console.log(this.val);
    }
},

question from:https://stackoverflow.com/questions/65896817/v-select-in-datatable-onchange-cannot-pass-the-value

Answer 1

First change :model to v-model=, which is the syntax for Vue's built-in default model binding:

v-model="item.progress"

Now the item.progress property will be automatically updated when the selection is changed. If you still need to do something more in the change handler, you can pass both by passing the $event variable (which will hold the selected value) along with the item:

@change="changeProgress($event, item)"

Your handler should then have a structure like:

methods: {
  changeProgress(selected, item) {
    console.log(selected, item);
  }
}