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 をインストールする方法

推薦する

HTML における br と br/ の違い

スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...

CSS は、モバイル端末でクリックされたときに生成された要素の背景色を削除します (推奨)

クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...

テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

dockerログマウントの問題を解決する

重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...

MySQLのSQLモードの特徴のまとめ

序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

虫眼鏡の詳細のJavaScript実装

目次1. レンダリング2. 実施原則3. まとめ1. レンダリング 2. 実施原則幅と高さが等しい拡...