Getting the element reference and new value on onChange event in vuetifyJS v-switch-CodePudding

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

CodePudding user response：

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.