Question

使用this。$ set（）多次更新数据变得越来越困难。它仅适用于第一次，如果我再尝试一次，则没有任何变化。对象将使用新数据进行更新，但更改不会反映在表单上。

这是我到目前为止所做的-

data () {
  return {
    days : [
      {id : 1,day : 'MONDAY'    ,status : false ,times: ['']},
      {id : 2,day : 'TUESDAY'   ,status : false ,times: ['']},
      {id : 3,day : 'WEDNESDAY' ,status : false ,times: ['']},
      {id : 4,day : 'THURSDAY'  ,status : false ,times: ['']},
      {id : 5,day : 'FRIDAY'    ,status : false ,times: ['']},
      {id : 6,day : 'SATURDAY'  ,status : false ,times: ['']},
      {id : 7,day : 'SUNDAY'    ,status : false ,times: ['']}
    ],
  }
},
methods : {
  manageSlotTime(event,parentIndex,childIndex) {
    var data = this.days[parentIndex].times;
    for(var i=0;i<data.length;i++)
    {
      if(i == childIndex)
      {
        if(childIndex == 0)
        {
            data[i] = {};
            data[i].slot_id = '';
            data[i].time = event;
            data[i].slot_status = false;  
        }
        else{
          data[i].time = event;
          data[i].slot_status = false;  
        }

      }
    }    
    //Here need to set data.
    this.$set(this.days[parentIndex].times, data);   
  },
}

任何帮助将不胜感激。
谢谢

Answer 1

这很可能与数组警告有关。您最初为数组分配时间。但是，vue无法检测到对阵列的更改。

由于JavaScript的限制，Vue无法检测到对数组的直接更改。

如果该属性是数组，则在循环中使用以下语法应有助于解决该问题。

this.$set(vm.items, indexOfItem, newValue)

因此在您的示例中，您可以使用以下内容。

this.$set(this.days[parentIndex].times, i, dataObject);

这看起来像这样。

if(childIndex == 0) {
    data = {};
    data.slot_id = '';
    data.time = event;
    data.slot_status = false;  
    this.$set(this.days[parentIndex].times, i, data); 
}

Answer 2

这里有些奇怪的事情。

首先，您每天将times属性设置为一个非空数组-将一个空的 string 保留为单个元素。但是随后每个manageSlotTime调用要么增加该数组的现有元素，要么用 object 替换第一个元素。该替换似乎是您看到第一个set调用方式工作原理的原因。提示：实际上不是。

第二，您似乎错过了这一行……

var data = this.days[parentIndex].times

...不会创建新的数组。相反，它为存储在this.days[parentIndex].times中的数组创建另一个 reference 。之后，您对循环中的data所做的任何操作实际上都是直接在状态内部修改数组。反过来，这使得与$set的呼叫无关。

最后，由于某些原因，您使用for来按索引访问数组中的属性；嗯，这只是一个过度复杂的问题。问问自己：如果您仅在if (i === childIndex)检查中做一些工作，而所有工作都是关于访问data[i]的，为什么您不能直接做data[childIndex]？

最重要的是-看起来您的函数可以这样重写：

manageSlotTime(event, parentIndex, childIndex) {
  var timesRef = this.days[parentIndex].times;

  var slot = childIndex === 0 ? 
     { slot_id: '' } :
     Object.assign({}, timesRef[childIndex]);
  slot.time = event;
  slot.slot_status = false;

  this.$set(timesRef, childIndex, slot);
}

这里有几个问题（childIndex === 0有什么特别之处？slot_id的分配方式是什么？），但是这段代码与您的代码本质上相同，但是行数少且适当的{{1} }。

this。$ set仅设置一次数据

2 个答案: