Vuetify Datatable内v-select变更时无法传值？如何同时传递行数据与选中值

完全可以实现同时获取当前表格行item值、v-select实时选中值的需求，之前代码拿不到值的核心是事件绑定和组件写法存在两处偏差。

问题原因 #

• 事件传参被截断：原代码写@change="changeProgress(item)"时，相当于给回调函数写死了只接收item一个参数，v-select触发change事件时自动抛出的选中值参数被完全忽略，方法里访问的this.val没有任何数据来源，自然无法打印出有效内容
• 组件绑定不规范：原代码使用:model="item.progress"做单向绑定，不符合v-select的双向绑定逻辑

正确实现代码 #

插槽模板部分 #

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

回调方法部分 #

methods: {
  changeProgress(selectValue, rowItem) {
    // 这里selectValue就是v-select的实时选中新值
    // rowItem就是当前行的完整数据对象
    console.log('当前行数据：', rowItem);
    console.log('下拉框选中的最新值：', selectValue);
  }
}

实用提醒 #

• 模板事件绑定里的$event是Vue内置的固定占位符，专门用来承接当前事件抛出的参数，需要同时传自定义参数和事件值的时候，把$event放在参数列表的对应位置即可，不会和其他参数冲突
• 直接用v-model把v-select绑定到当前行的item.progress字段，用户选完值会自动同步到行数据里，不需要在change方法里手动给行字段重新赋值
• Vuetify 2、3两个大版本中v-select的change事件触发逻辑和双向绑定规则完全兼容上述写法，不需要做额外适配

内容的提问来源于stack exchange，提问作者Bryant Tang