プロジェクトシナリオ:ページ表示には <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') </スクリプト> 原因分析:公式文書を調べたところ、次のような一節が見つかりました。
理由は明らかです。最初はフォームの data の下に
解決: 1. フォーム オブジェクトの data の下側で、 データ: 関数() { 戻る { 形状: { データリスト: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。
>>: Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法
この記事では、プログレスバーヒストグラムを実現するためのvue+echartsの具体的なコードを参考...
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
データ移行は、MySQL から ClickHouse にインポートする必要があります。概要プランは以...
目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...
[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...
崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...
目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...
目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...
Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...