Vue.js数组字段绑定问题：多行表格日期原地编辑失效求助

你遇到的问题核心是Vue响应式系统对数组索引直接修改的检测限制——当你通过this.editables[index] = true这种方式修改数组元素时，Vue无法自动检测到这个变化，所以视图不会更新，看起来点击事件没反应。

解决方案1：使用this.$set触发响应式更新 #

Vue提供了$set方法（全局的Vue.set也可以），专门用来处理这种无法被自动检测的数组/对象修改。修改你的makeEditable方法即可：

methods: {
  makeEditable(index) {
    // 用$set来修改数组元素，确保响应式更新
    this.$set(this.editables, index, true);
  }
}

同时补充Accept按钮的逻辑，完整代码如下：

<div id="root">
  <div v-for="(item,index) in oldDates" :key="index">
    <label>Test Date:</label>
    <span v-show="!editables[index]">{{item}}</span>
    <span v-show="editables[index]">
      <input type="date" v-model="oldDates[index]" required=""/>
      <button @click="acceptClicked(index)">Accept</button>
      <button @click="editables[index]=false">Cancel</button>
    </span>
    <button v-show="!editables[index]" @click="makeEditable(index)">Change</button>
    <hr />
  </div>
</div>

new Vue({
  el: "#root",
  data: {
    oldDates: ['2019-01-04', '2019-02-04'],
    editables: [false, false]
  },
  methods: {
    makeEditable(index) {
      this.$set(this.editables, index, true);
    },
    acceptClicked(index) {
      // 可添加日期非空等校验逻辑
      this.$set(this.editables, index, false);
    }
  }
});

解决方案2：改用对象数组（更推荐） #

把每个日期项封装成包含日期值和编辑状态的对象，这样修改对象的属性时，Vue能自动检测到变化，代码也更清晰易维护：

<div id="root">
  <div v-for="(dateItem, index) in dateList" :key="index">
    <label>Test Date:</label>
    <span v-show="!dateItem.isEditable">{{dateItem.value}}</span>
    <span v-show="dateItem.isEditable">
      <input type="date" v-model="dateItem.value" required=""/>
      <button @click="dateItem.isEditable = false">Accept</button>
      <button @click="dateItem.isEditable = false">Cancel</button>
    </span>
    <button v-show="!dateItem.isEditable" @click="dateItem.isEditable = true">Change</button>
    <hr />
  </div>
</div>

new Vue({
  el: "#root",
  data: {
    dateList: [
      { value: '2019-01-04', isEditable: false },
      { value: '2019-02-04', isEditable: false }
    ]
  }
});

这种写法不需要额外的方法，直接修改对象的isEditable属性就能触发视图更新，逻辑更简洁，也从根源上避免了数组索引修改的响应式问题。

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