Question

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

https://jsfiddle.net/asrajan55/qv6crg84/

<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;
          }
        }
      }
   });

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

https://jsfiddle.net/asrajan55/9uhkr4w0/3/

<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;
        }
    }
});

Answer 1

问题是您要对数组进行适当的变异，创建一个新的数组引用并传递它可以解决问题

固定在这里：https://jsfiddle.net/e3L2zcna/

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

Answer 2

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

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

https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

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

2 个答案: