如何从VDataTable中获取每行v-select的选中值？

在使用Vuetify的VDataTable展示人员列表时，每行嵌入的v-select为循环渲染，无法直接获取对应人员选中的操作选项值。

相关代码 #

<VDataTable class="table" :headers="headers" :items="dataRef" :items-per-page="10" height="300" fixed-header>
  <template #item.fullName="{ item }">
    <div class="d-flex align-center">
      <div class="d-flex flex-column ms-3">
        <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
      </div>
    </div>
  </template>
  <template #item.action="{ item }">
    <v-select clearable :items="actionOptions" v-model="item.selectedAction"></v-select>
  </template>
</VDataTable>

相关数据 #

{
  "title": "FitPal",
  "description": "FitPal是一款前沿的移动应用，旨在彻底改变你的健身之旅。无论你是资深健身爱好者还是新手，FitPal都是你实现健康目标的终极伙伴。",
  "point": 10,
  "starting_date": "2023-10-10",
  "ending_date": "2023-12-10",
  "remain": 10,
  "participants": [
    {"id": 0, "name": "John Doe", "email": "john.doe@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 1, "name": "Jane Smith", "email": "jane.smith@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 2, "name": "Bob Johnson", "email": "bob.johnson@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 3, "name": "Alice White", "email": "alice.white@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 4, "name": "Eve Black", "email": "eve.black@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 5, "name": "John Doe", "email": "john.doe@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 6, "name": "Jane Smith", "email": "jane.smith@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 7, "name": "Bob Johnson", "email": "bob.johnson@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 8, "name": "Alice White", "email": "alice.white@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" },
    {"id": 9, "name": "Eve Black", "email": "eve.black@example.com", "joinTime": "2023-11-13", "selectedAction": "waiting" }
  ]
}

操作选项 #

const actionOptions = ["Waiting", "Testing", "Done"];

解决方案 #

方法1：监听数组深层变化 #

通过Vue的watch监听participants数组的深层变更，对比新旧值捕获操作选项的变化：

watch(dataRef.value.participants, (newParticipants, oldParticipants) => {
  newParticipants.forEach((newParticipant, index) => {
    const oldParticipant = oldParticipants[index];
    if (newParticipant.selectedAction !== oldParticipant.selectedAction) {
      console.log(`人员 ${newParticipant.name} 选择了操作：${newParticipant.selectedAction}`);
      // 此处可添加业务逻辑，如提交变更、更新状态等
    }
  });
}, { deep: true });

方法2：绑定change事件直接处理 #

给v-select绑定change事件，选中时直接获取当前人员和操作值，无需监听整个数组，性能更优：

修改v-select模板：

<v-select 
  clearable 
  :items="actionOptions" 
  v-model="item.selectedAction"
  @change="handleActionChange(item, $event)"
></v-select>

添加处理函数：

const handleActionChange = (participant, selectedAction) => {
  console.log(`人员 ${participant.name} 选择了操作：${selectedAction}`);
  // 执行业务逻辑，如更新后端数据、同步本地状态等
};

说明 #

• 方法1适合批量监听所有人员操作变更的场景，但deep: true会带来一定性能开销，数据量大时需谨慎使用。
• 方法2更轻量化，实时响应单条数据的操作变更，适合大多数场景。

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