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

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 は配列やオブジェクトの変更を検出できません。ただし、これらの制限を回避し、応答性を維持する方法はあります。

  1. オブジェクトの場合: Vue はプロパティの追加または削除を検出できません。 Vue はインスタンスを初期化するときにプロパティに対して getter/setter 変換を実行するため、Vue がプロパティをレスポンシブに変換するには、 dataオブジェクトにプロパティが存在している必要があります。
  2. 配列の場合: 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueのSSRサーバーサイドレンダリング例の詳細な説明
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • Vueの最初のレンダリングのプロセス全体についての簡単な説明
  • Vue3 のレンダリング関数における互換性のない変更の詳細な説明
  • Vue シングルページ アプリケーションで Markdown レンダリングを実装する

<<:  MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

>>:  Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

推薦する

Vue+echarts でプログレスバーのヒストグラムを実現

この記事では、プログレスバーヒストグラムを実現するためのvue+echartsの具体的なコードを参考...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

MySQLからClickHouseに移行する5つの方法

データ移行は、MySQL から ClickHouse にインポートする必要があります。概要プランは以...

Vue2 における 12 種類のコンポーネント通信

目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策

崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...

要素ツリーコントロールは、ドロップダウンメニューとアイコンを統合します(ツリー+ドロップダウン+入力)

目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

Spark SQL の 4 つの一般的なデータ ソースの詳細な説明

汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...

MySQLクエリキャッシュに関するヒント

目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...

Linuxコマンド履歴の調整方法の詳細な説明

Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...

Linux で xargs コマンドを使用する詳細なチュートリアル

みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...