プロジェクトシナリオ:ページ表示には <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 をインストールする方法
スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...
クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...
この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...
Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...
重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...
私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...
序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
始める前にクラウドサーバーを持っています。私のはTencent Cloud Server (Cent...
目次1. レンダリング2. 実施原則3. まとめ1. レンダリング 2. 実施原則幅と高さが等しい拡...