v-data-table中点击单个复选框却触发所有行事件的解决方法

你遇到的问题根源在于错误使用了属性绑定:update:modelValue，而非事件监听@update:modelValue。:update:modelValue会将函数执行的结果绑定到属性上，每次组件重新渲染（比如任意行的复选框状态变化导致数据更新），所有可见行的selectIndividual函数都会被执行一次；而@update:modelValue是监听复选框的模型值更新事件，只有当前被点击的复选框才会触发对应的事件处理函数。

修正后的代码实现 #

模板部分

将属性绑定改为事件监听，通过箭头函数捕获当前行的index和item参数：

<v-data-table :items="eventData" item-key="myID" ...>
  ...
  <template v-slot:item="{ item, index }">
    ...
    <v-checkbox 
      v-model="item.isSelected" 
      @update:modelValue="() => selectIndividual(index, item)"
    ></v-checkbox>
    ...
  </template>
</v-data-table>

（可选）获取最新选中状态

如果需要获取复选框的最新选中值，可在箭头函数中传递事件参数：

<v-checkbox 
  v-model="item.isSelected" 
  @update:modelValue="(newState) => selectIndividual(index, item, newState)"
></v-checkbox>

对应的组件代码可调整为：

selectIndividual(index, item, newState) {
  console.log(index, item, newState);
},

原理说明 #

• @update:modelValue是Vuetify复选框的官方事件，仅在当前复选框被交互（点击切换状态）时触发。
• 箭头函数的作用是在模板渲染时捕获当前行的index和item上下文，确保事件触发时能准确传递当前行的信息，避免参数混淆。

内容的提问来源于stack exchange，提问作者Corey Ogburn