I display v-switch using a v-for loop
<tr v-for="product in products" :key="product.id">
<td>{{ product.name }}</td>
<td>
<v-switch :input-value="product.currentUserTracking"
dense
inset
@change="trackingStateChanged"
></v-switch>
</td>
</tr>
Whenever the state of any of the v-switch changes, I want to know the id of the corresponding product and the new value. I tried the following approaches
1st Approach
@change="trackingStateChanged"
trackingStateChanged(event) {
console.log(event) //event contains the new value(true/false)
},
2nd Approach
@change="trackingStateChanged(event, product.id)"
trackingStateChanged(event, productId) {
console.log(event) //event is undefined
console.log(productId) //productId is available e.g pr345665
},
I am not able to get both product.id and the new value with either approach. Any idea how this can be achieved.
Thanks in advance
Use $event instead of event in @change. You can get the value using these:
@change="trackingStateChanged($event, product.id)
trackingStateChanged(event, productId) {
console.log(event);
console.log(productId);
},
From vue.js web site:
Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable.