Vue表格每行Like/Dislike按钮选中状态持久化问题求助

问题场景 #

开发Vue项目时，通过WebSocket从后端获取JSON数据渲染表格，每行设有Like/Dislike按钮用于评估搜索质量，但切换行操作时，之前行的选中状态会丢失。

项目流程：用户输入术语发送至后端，后端返回包含自动补全语句及其他API信息的JSON，前端提取数据后在表格中展示描述内容。

问题根源 #

初始渲染表格数据时，未给每行数据绑定独立的选中状态标识，导致状态无法与行数据关联，切换操作时状态被重置或覆盖。

解决方法 #

在处理后端返回数据的receiveText方法中，为每一行数据添加初始化的选中状态字段，将状态与行数据绑定，确保每行状态独立存储。

关键代码示例 #

数据处理逻辑（receiveText方法）

receiveText(message) {
  const responseData = JSON.parse(message.data);
  // 提取表格数据并初始化每行的选中状态
  this.tableData = responseData.completions.map(item => ({
    ...item,
    likeStatus: null // 初始状态：未选择
  }));
}

模板绑定状态

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.description }}</td>
      <td>
        <button :class="{ active: item.likeStatus === 'like' }" @click="item.likeStatus = 'like'">Like</button>
        <button :class="{ active: item.likeStatus === 'dislike' }" @click="item.likeStatus = 'dislike'">Dislike</button>
      </td>
    </tr>
  </table>
</template>

原理说明 #

通过给每行数据添加独立的likeStatus字段，让选中状态与行数据一一绑定，后续操作时状态会随数据一同保留，切换行操作不会丢失之前的选中状态。

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