Vue问题：v-select文本变更后仅高亮对应行复选框而非全部

你当前代码的核心问题是使用了全局变量isShowAddBtn，只要任意一行的v-select发生变更，这个全局状态就会变为true，导致所有行的红色CheckIcon都显示出来；同时复选框的显示逻辑也没有和单行数据正确绑定，最终出现所有行复选框都标红的问题。

以下是具体的修复步骤：

1. 初始化行级独立状态 #

在mounted钩子中，给每个列表项添加专属的状态属性，替代全局变量：

mounted() {
  this.destrTestInfo.forEach(item => {
    item.previous_status_text = item.digital_status_text
    item.isCheckboxChecked = false
    // 新增行级的按钮显示控制属性
    item.showAddBtn = false
  })
},

2. 修改模板中的状态判断逻辑 #

将CheckIcon的显示条件从全局的this.isShowAddBtn改为当前行的item.showAddBtn，同时简化参数传递：

<tr v-for="(item, index) in this.destrTestInfo" :key="index">
  <td class="destr_tab">
    <input type="checkbox" :value="item.name" v-model="selectNameDestr" :id="item.id" v-if="item.isCheckboxChecked">
  </td>
  ...
  <td class="destr_tab">
    <div style="display: flex">
      <v-select
          style="width: 450px"
          @update:modelValue="showAddBtn(item)"
          v-model="item.digital_status_text"
          :options="this.dictionary"
          :reduce="text => text.id"
          label="text">
      </v-select>

      <CheckIcon
          v-if="item.showAddBtn"
          style="color: red"
          @click="addNewStatus(item)">
      </CheckIcon>
      ...
    </div>
  </td>
</tr>

3. 更新方法逻辑，绑定行级数据 #

修改showAddBtn和addNewStatus方法，直接操作当前行的item属性，避免全局状态污染：

showAddBtn(item){
  // 仅控制当前行的按钮显示状态
  item.showAddBtn = item.digital_status_text !== item.previous_status_text
},
async addNewStatus(item) {
  const urlStat = this.$store.state.supervisionURL + "/api/v1//destructive/result/" + item.id
  await axios.put(urlStat, {
    digital_status: item.digital_status_text
  })
  .then(response => {
    // 关闭当前行的按钮
    item.showAddBtn = false
    // 更新历史状态，避免重复触发
    item.previous_status_text = item.digital_status_text
    // 标记当前行的复选框为显示状态
    item.isCheckboxChecked = true
  }).catch(error => {
    // 可在此添加错误提示逻辑
  })
},

问题根源总结 #

• 全局状态isShowAddBtn是共享变量，会导致所有行的按钮同步显示/隐藏
• 原addNewStatus方法遍历整个数组查找item效率低下，直接传入item可直接操作
• 未更新previous_status_text会导致后续操作重复触发按钮显示逻辑

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