在 vuetifyJS v-switch 中获取元素引用和 onChange 事件的新值

Question

我使用 v-for 循环显示 v-switch

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

每当v-switch中的任何一个状态发生变化时，我想知道相应产品的id和新值。我尝试了以下方法

第一种方法

@change="trackingStateChanged"

trackingStateChanged(event) {
  console.log(event) //event contains the new value(true/false)
},

第二种方法

@change="trackingStateChanged(event, product.id)"

trackingStateChanged(event, productId) {
  console.log(event) //event is undefined
  console.log(productId) //productId is available e.g pr345665
},

我无法通过任何一种方法同时获得 product.id 和 new value。知道如何实现这一目标。

提前致谢

Answer 1

在 @change 中使用 $event 而不是 event。您可以使用这些获取值：

@change="trackingStateChanged($event, product.id)

trackingStateChanged(event, productId) {
  console.log(event);
  console.log(productId);
},

来自 vue.js 网站：

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.

在 vuetifyJS v-switch 中获取元素引用和 onChange 事件的新值

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

javascript

events

vue.js

vuejs2

vuetify.js