Vuetify v-switch的onChange事件中如何同时获取对应id和新值

解决方案 #

你只需要在绑定@change事件时，显式传入Vue提供的特殊变量$event作为第一个参数，再跟上你要传递的product.id即可，$event会固定接收v-switch触发change事件时抛出的开关最新值。

模板代码修改： #

<tr v-for="product in products" :key="product.id">
  <td>{{ product.name }}</td>
  <td>
   <v-switch :input-value="product.currentUserTracking"
             dense
             inset
             @change="trackingStateChanged($event, product.id)"
   ></v-switch>
  </td>
 </tr>

对应方法代码： #

trackingStateChanged(newVal, productId) {
  console.log(newVal) // 开关最新布尔值，true/ false
  console.log(productId) // 对应行的product id
},

原错误原因说明 #

你第二种方案里直接写的event属于未定义的自定义变量，Vue不会自动把事件值赋值给它，所以拿到的是undefined。只有用Vue内置的$event变量，才能正确接收到组件抛出的事件参数。

内容的提问来源于stack exchange，提问作者Meena Chaudhary