绑定到vue.js中的数组字段

我想在表行中创建多个“就地”可编辑日期字段。 下面单个字段的示例有效。 我将currentdate（oldDate）显示为标签。用户单击“更改”，将显示一个输入字段，编辑后用户可以接受或取消

测试日期：
{{oldDate}}
接受
取消
改变
新Vue({
el:“根”，
数据：{
旧日期：“2019-02-04”，
新日期：“2019-02-04”，
makeEditable:false，
},
方法：{
acceptClicked（）{
if（this.newDate！=''）{
this.oldDate=this.newDate；
this.makeEditable=false；
}
}
}
});

但是，如果我尝试多（2）个字段，单击事件（有时）会触发，但似乎什么也没有发生。控制台中没有错误。此外，浏览器中的Vue调试器不会立即更新更改的字段。请帮忙。我绝望了，把头发拔出来

测试日期：
{{item}}
接受
取消
改变

新Vue({
el:“根”，
数据：{
旧日期：['2019-01-04'，'2019-02-04']，
新日期：['2019-01-04'，'2019-02-04']，
可编辑内容：[假，假]
},
方法：{
使可编辑（索引）{
警报（索引）；
this.editables[index]=true；
}
}
});

问题在于，您对阵列进行了适当的变异， 创建一个新的数组引用并传递它可以解决这个问题

修正如下：

尝试使用此.$set（this.editables，index，true）

如果使用[]直接访问元素，则Vue无法检测对数组的更改。请在此处阅读：

<div id="root">
    <label>Test Date:</label>
    <span v-show="!makeEditable"> {{ oldDate }} </span>
    <span v-show = "makeEditable">

        <input type="date" v-model="newDate" required=""/>
        <button @click="acceptClicked">Accept</button>
        <button name="cancel" @click="makeEditable=false">Cancel</button>
    </span>
    <button v-show="!makeEditable" @click="makeEditable=true" >Change</button>
  </div>

  new Vue({
      el: "#root",
      data: {
        oldDate: '2019-02-04',
        newDate: '2019-02-04',
        makeEditable: false,
      },

      methods: {
        acceptClicked(){
          if (this.newDate!='') {
            this.oldDate=this.newDate;
            this.makeEditable=false;
          }
        }
      }
   });

<div id="root">
    <div v-for="(item,index) in oldDates">
        <label for="">Test Date:</label>
        <span v-show="!editables[index]">{{item}}</span>
        <input v-show="editables[index]" type="date" v-model="oldDates[index]"/>
        <button v-show="editables[index]">Accept</button>
        <button v-show="editables[index]" @click="editables[index]=false">Cancel</button>
        <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'],
        newDates: ['2019-01-04', '2019-02-04'],
        editables: [false, false]
    },

    methods: {
        makeEditable(index) {
            alert(index);
            this.editables[index] = true;
        }
    }
});

makeEditable(index) {
      this.editables = this.editables.map((val,i) => i===index || val);
    }