vm。$ set（）、vm。$ delete（）

vm。$ set

機能：レスポンシブオブジェクトに属性を追加し、この新しい属性もレスポンシブであることを確認して、ビューの更新をトリガーします。vueは通常の新しいプロパティ（this.myObject.newProperty = 'hi'など）を検出できないため、リアクティブオブジェクトに新しいプロパティを追加するために使用する必要があります。注：オブジェクトをvueインスタンス、またはvueインスタンスのデータオブジェクトにすることはできません。

vm。$ delete

機能：オブジェクトのプロパティを削除します。オブジェクトがレスポンシブである場合は、削除によってビューの更新がトリガーされることを確認してください。このメソッドは主に、属性が削除されたことをVueが検出できないという制限を回避するために使用されます。
注：ターゲットオブジェクトをVueインスタンスまたはVueインスタンスのルートデータオブジェクトにすることはできません。

1つは、達成された効果

次に、元の実装方法は次のとおりです。

 //增加时间
      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)
      },

第三に、現在の実装（別の同じ機能コード）

// 添加套餐分组
    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);
    },

つまり、この$SETはいる調製3番目のパラメータの数を、第一番目は、ある手段アウト数のデータにDATAにおける位置セット、最初ジカルボンTHがある新規増加数データのケーブルリード、最初の3番目であり、新たな増加データ項目の数で。別の外、THIS。$deleteには2つのパラメーターがあります。1つはデータ内のデータの位置を示すためのもので、もう1つは削除されたデータのインデックスです。