Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクションでは、各配列オブジェクトに別の属性と値を追加します。 // データはコレクションオブジェクトを定義します responseData:[ {'id':'1','name':'婦人服','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'メンズ衣料品','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'子供服','price':118,'num':2,'pic':'../static/img/3.jpg'} ]、 // vue メソッドリクエストはコレクションオブジェクトデータを返します if (res.data.code === 'ok') { that.totals = res.data.data.total; that.questionList = res.data.data.list; } // 代入演算 for(let val of that.questionList){ //これが重要なポイントです。$set(val,'discussAnswer','0'); } Vue this.$set の使用法変更後に配列やオブジェクトが更新されない問題を解決する 1. this.$set は何をするもので、なぜ使用する必要があるのでしょうか?オブジェクトにプロパティを追加し、コンソールに出力できるが、ビューでは更新されない場合、 this.$set() メソッドを使用する必要があるかもしれません。簡単に言えば、 this.$set の機能は、この問題を解決することです。 公式の説明: レスポンシブ オブジェクトにプロパティを追加し、新しいプロパティもレスポンシブであり、ビューの更新をトリガーすることを確認します。 Vue は通常の新しいプロパティ (this.myObject.newProperty = 'hi' など) を検出できないため、リアクティブ オブジェクトに新しいプロパティを追加するにはこれを使用する必要があります。 2. 使い方は?例えば: 1. テンプレートに記述された Vue コード: <div v-for="(item,index) リスト内" :key="index" >{{アイテム名}} </div> <button @click="changeValue" type="primary">値を変更</button> </div> 2. デフォルトでデータをエクスポートする{} データ(){ 戻る { リスト:[ {名前:'29くん',id:1}, {名前:'299くん',id:2}, ] } } 3. ボタンをクリックしてchangeValueメソッドをトリガーします マウントされた(){ this.list[2] = {name:'2999くん',id:3} コンソールにログ出力します。 }, メソッド: { 値を変更する(){ this.$set(this.list,2,{name:'2999kun',id:3}) } } 呼び出しメソッド: this.$set( target, key, value ) 値: 再割り当てされた 4. ボタンがクリックされていない場合、インターフェースは次のようになります。インターフェースは表示されませんが、コンソールが印刷されています。 5. ボタンをクリックすると、this.$set メソッドが呼び出され、3 番目の属性が正常に表示されます。 上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux に起動方法を追加する (サービス/スクリプト)
この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...
SQL文 ドロップトリガー もし sys_menu_edit が存在します。 各行のsys_menu...
ダウンロードしてインストールします。まず、システムに MySQL または MariaDB があるかど...
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...
序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...
数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...
目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...
目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...
目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...
目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...
1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...
テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...