Vue での this.$set の動的データバインディングのケーススタディ

<テンプレート>
  <div>
    <!-- 単一データ -->
    <button @click="text0a">テキスト0</button>
    <p>テキスト0: {{text0}}</p>
    <!-- オブジェクト -->
    <button @click="textObja">テキストオブジェクト</button>
    <p>textObj.text1: {{textObj.text1}}</p>
    <!-- 配列 -->
    <button @click="textArra">テキストArr</button>
    <p>テキストArr[1]: {{テキストArr[1]}}</p>
    <!-- json データ -->
    <button @click="textJsona">テキストJson</button>
    <p>textJson[1].t5: {{textJson[1].t5}}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      テキスト0: ''、
      テキストオブジェクト: {},
      テキスト配列: [],
      テキストJson:[
        {t0: ''},
        {t4: ''},
        {t7: ''},
      ]
    }
  },
  メソッド: {
    テキスト0a: 関数() {
      vm = this とします
      text100 = 'efghjk' とします
      vm.$set(vm,'テキスト0',テキスト100) 
      //vm.$set(vm,'text0','efghjk') と同等
    },
    テキストオブジェクト: 関数 () {
      vm = this とします
      textObj100 = {とする
        テキスト1: '123',
        テキスト2: '456'
        }
      vm.$set(vm.textObj,'text1',textObj100.text1) 
      //これはvm.$set(vm,'textObj',textObj100)と同等です
    },
    テキストArra: 関数() {
      vm = this とします
      textArr200 = ['a1','a2','a3'] とします。
      vm.$set(vm,'textArr',textArr200)
    },
    テキストJSONA: 関数() {
      vm = this とします
      textJson300 = [ とします。
        {t1: 't1'、t2: 't2'、t3: 't3'},
        {t4: 't4'、t5: 't5'、t6: 't6'}、
        {t7: 't7'、t8: 't8'、t9: 't9'},
      ]
      vm.$set(vm.textJson[1],'t5',textJson300[1].t5) 
      //これは vm.$set(vm,'textJson',textJson300) と同等です
    }
  }
}
</スクリプト>
<スタイル>
</スタイル>

this.$set(データ名、キー名、キー値)

エクスポートデフォルト{
 データ：{
  //まず空のオブジェクトformObjectを定義します:{},
  配列リスト:[],
 },
 マウント() {
  この.initPage()
 },
 方法:{
  initPage(){
   this.$store.dispatch(namespace/callData).then(res=>{
    // データのキーと値を設定する
    res.data.forEach(item=>{
     // ❗❗❗❗❗ this.formObject[item.name] = item.value // ❗❗❗❗ このメソッドはビューを更新できません this.$set(this.formObject, item.name, item.value) // ✅✅✅✅ビューを更新できます})
   })
   // 配列を変更します this.$store.dispatch(namespace/callData).then(res=>{
    // データのキーと値を設定する
    this.$set(this.arrayList,0,(res.data)[0].id) ✅✅✅✅ビューを更新できます})
  }
 }
}