Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:

ページ表示には <ul> タグがあります。リストデータを動的に表示する必要があります。リストの値に加えて、ページに表示される他の値があります。そのため、リストデータのデータ構造はオブジェクトの下の配列です。データを動的に変更した後、自動的にレンダリングされないことがわかります。

問題の説明:

「click me!」ボタンをクリックすると、データが変更され、コンソールに出力されますが、リストデータはレンダリングされません。
コードは次のとおりです。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="アプリ">
  <button @click="pushDataToDataList">クリックしてください!</button>
  <ul>
    <li v-for="(item, i) in form.dataList" :key="item">
      {{ i + ":" + アイテム }}
    </li>
  </ul>
</div>
<スクリプト>
  アプリを新しいVue({
    データ: 関数() {
      戻る {
        形状： {}
      }
    },
    メソッド: {
      プッシュデータからデータリストへ() {
        if (this.form.dataList == null) {
          this.form.dataList = []
        }
        this.form.dataList.push("abc" + this.form.dataList.length)
        console.log(このフォームのデータリスト)
      }
  }
  }).$mount('#app')
</スクリプト>

Chromeのコンソール表示

原因分析:

公式文書を調べたところ、次のような一節が見つかりました。

JavaScript の制限により、Vue は配列やオブジェクトの変更を検出できません。ただし、これらの制限を回避し、応答性を維持する方法はあります。
オブジェクトの場合: Vue はプロパティの追加または削除を検出できません。 Vue はインスタンスを初期化するときにプロパティに対して getter/setter 変換を実行するため、Vue がプロパティをレスポンシブに変換するには、 dataオブジェクトにプロパティが存在している必要があります。
配列の場合: Vue は次の配列の変更を検出できません。
配列項目をそのインデックスを使用して直接設定する場合、例: vm.items[indexOfItem] = newValue
配列の長さを変更する場合、例えば： vm.items.length = newLength

理由は明らかです。最初はフォームの data の下にdataList属性がないため、データはレンダリングされません。そのため、後で値が変更されても、Vue はその変更を検出できません。これは配列だけではなく、js オブジェクトでも同様です。また、添字を押して配列の要素を直接変更しても、ビューのレンダリングはトリガーされません。
次の配列メソッドは配列のレンダリングをトリガーします。

push(element) // 配列の末尾に要素を追加する
pop() // 配列の最後の要素を削除して返す
shift() // 配列の最初の要素を削除して返す
unshift(ele1, ele2, …, eleN) // 配列の先頭に1つ以上の要素を追加し、新しい長さを返します
splice(start, deleteCount?, …item) // 配列内の要素を削除し、新しい要素に置き換えます
sort() // 配列をソートし、配列要素の位置を変更する
逆順() // 配列要素を反転すると配列要素の位置が変更されます

解決：

1. フォームオブジェクトの data の下側で、 dataListプロパティを設定します。フロントエンドはデータを処理する際のコードの構造を認識しているため、事前に設定しておくとその後の開発や理解も容易になります。建議使用

データ: 関数() {
  戻る {
    形状： {
      データリスト: null
    }
  }
}

2. this.$set() メソッドを使用する

プッシュデータからデータリストへ() {
  if (this.form.dataList == null) {
    // まずフォームのdataListプロパティを設定します。this.$set(this.form, 'dataList', [])
  }
  this.form.dataList.push("abc" + this.form.dataList.length)
  console.log(このフォームのデータリスト)
}

参考リンク

Vue のデータ変更検出に関する注意事項

これで、Vue バインドオブジェクトと配列変数が変更後にレンダリングできない問題を解決する方法についての記事は終了です。Vue バインドオブジェクトと配列変数が変更後にレンダリングできない問題に関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: