VueJS表格中按钮切换显示失效：点击按钮A无响应问题求助

你的代码点击按钮后无反应，核心原因是Vue 2无法检测数组索引的直接赋值操作，导致修改editing[index]后视图不会更新。虽然console.log能输出内容，但响应式系统没触发视图重渲染。

解决方案一：用$set触发响应式更新 #

Vue提供了$set方法（全局API是Vue.set），可以强制触发数组元素的响应式更新：

修改methods中的方法：

methods: {
  editItem(index) {
    this.$set(this.editing, index, true);
    console.log("editItem");
  },
  saveItem(index) {
    this.$set(this.editing, index, false);
    console.log("saveItem");
  },
}

解决方案二：将editing改为对象（更推荐） #

用每个item的唯一id作为对象的键，避免数组索引可能带来的混乱（比如数组元素顺序变化时索引失效）：

模板部分修改： #

<td>
  <span v-show="!editing[item.id]">
    <button class="icon-A" @click="() => editItem(item.id)">A</button>
  </span>
  <span v-show="editing[item.id]">
    <button class="icon-B" @click="() => saveItem(item.id)">B</button>
  </span>
</td>

脚本部分修改： #

data() {
  return {
    items: [
      { id: 1, columnA: 'A1', columnB: 'B1' },
      { id: 2, columnA: 'A2', columnB: 'B2' },
      { id: 3, columnA: 'A3', columnB: 'B3' },
    ],
    editing: {}, // 从数组改为空对象
  };
},
methods: {
  editItem(id) {
    this.editing[id] = true;
    console.log("editItem");
  },
  saveItem(id) {
    this.editing[id] = false;
    console.log("saveItem");
  },
},

解决方案三：用数组splice方法修改元素 #

利用Vue能检测到的数组变异方法splice来修改元素：

methods: {
  editItem(index) {
    this.editing.splice(index, 1, true);
    console.log("editItem");
  },
  saveItem(index) {
    this.editing.splice(index, 1, false);
    console.log("saveItem");
  },
}

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