vm.$set()、vm.$delete()

vm.$set

Function: Add an attribute to the responsive object, and ensure that this new attribute is also responsive, and trigger a view update. It must be used to add new properties to reactive objects, because vue cannot detect ordinary new properties (such as this.myObject.newProperty='hi') Note: The object cannot be a vue instance, or a data object of a vue instance

vm.$delete

Function: Delete the properties of the object. If the object is responsive, make sure that the deletion can trigger an update of the view. This method is mainly used to avoid the limitation that Vue cannot detect that the attribute is deleted.
Note: The target object cannot be a Vue instance or the root data object of a Vue instance.

One, the effect achieved

Second, the original implementation method:

 //增加时间
      addTime(){
    
    
          if(this.ruleForm.startTime && this.ruleForm.endTime){
    
    
              var obj={
    
    }
              obj.startTime=this.ruleForm.startTime
              obj.endTime=this.ruleForm.endTime
              this.ruleForm.timeList.unshift(obj)
          }else{
    
    
              this.$message('请选择时间')
          }
      },
      //删除时间
      delTime(index){
    
    
          this.ruleForm.timeList.splice(index,1)
      },

Third, the current implementation (another same function code)

// 添加套餐分组
    addGroup() {
    
    
      let obj = {
    
    
            title:'',
            num:'',
            tableData:[
              {
    
    
                title:'西红柿炒鸡蛋',
                price:'￥20.00',
                num:'0',
                total:'100'
              }
            ]
          };
      let arr = this.ruleForm.groups;
      this.$set(arr, arr.length, obj);
    },
    // 删除套餐分组
    delGroup(index) {
    
    
      if (index == 0) {
    
    
        return;
      }
      this.$delete(this.ruleForm.groups, index);
    },

In other words, this. $SEThaspreparedthreethparameternumber,firstathismeansoutnumberdatainDATAinthepositionset,firstdicarboxylicthis\; thenewincreasednumber\; ofdataof\; thecablelead,firstthreethis\; anewincreasein\; thenumber\; ofdataitems.Anotherouter,THIS.$delete has two parameters, the first is to indicate the position of the data in the data, and the second is the index of the deleted data.