vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

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 )

target : 変更するデータソース(オブジェクトまたは配列)

key : 変更する特定のデータ

値: 再割り当てされたvalue

4. ボタンがクリックされていない場合、インターフェースは次のようになります。インターフェースは表示されませんが、コンソールが印刷されています。

ここに画像の説明を挿入

ここに画像の説明を挿入

5. ボタンをクリックすると、this.$set メソッドが呼び出され、3 番目の属性が正常に表示されます。

ここに画像の説明を挿入

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue v-forループでタグ属性に値を割り当てる方法
  • Vueでループオブジェクトのプロパティと属性値を使用する方法
  • Vue ループトラバーサルオプションを実装し、対応するコントロールに割り当てる方法
  • Vueでオブジェクトにループして値を割り当てる方法

<<:  初心者向けMySQLインデックス

>>:  Linux に起動方法を追加する (サービス/スクリプト)

推薦する

Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

目次概要1. メニューとルーティング処理2. メニューとルートリスト3. ログインプロセスの処理概要...

よくある MySQL テーブル設計エラーの概要

目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

パーソナライズされた検索エンジンを使用して、必要なパーソナライズされた情報を検索します

現在、多くの人がインターネット上で生活しており、インターネットで情報を検索することは日常的な作業とな...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

JavaScript のフラット配列をツリー構造に変換する例

目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...

JavaScript の Strict モードの詳細な説明

目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...

MySQLインデックスが失敗するいくつかの状況の分析

1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...

Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

目次父から息子へ:息子から父へ: Vuex を使用せずにコンポーネント間で値を渡す方法は、親から子、...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

Vueは秒殺しのカウントダウンコンポーネントを実装する

この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考ま...

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...