Vue での this.$set の動的データバインディングのケーススタディ

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配列、json データのバインディングについてまとめます。

では、早速コードを見てみましょう。

<テンプレート>
  <div>
    <!-- 単一データ -->
    <button @click="text0a">テキスト0</button>
    <p>テキスト0: {{text0}}</p>
    <!-- オブジェクト -->
    <button @click="textObja">テキストオブジェクト</button>
    <p>textObj.text1: {{textObj.text1}}</p>
    <!-- 配列 -->
    <button @click="textArra">テキストArr</button>
    <p>テキストArr[1]: {{テキストArr[1]}}</p>
    <!-- json データ -->
    <button @click="textJsona">テキストJson</button>
    <p>textJson[1].t5: {{textJson[1].t5}}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      テキスト0: ''、
      テキストオブジェクト: {},
      テキスト配列: [],
      テキストJson:[
        {t0: ''},
        {t4: ''},
        {t7: ''},
      ]
    }
  },
  メソッド: {
    テキスト0a: 関数() {
      vm = this とします
      text100 = 'efghjk' とします
      vm.$set(vm,'テキスト0',テキスト100) 
      //vm.$set(vm,'text0','efghjk') と同等
    },
    テキストオブジェクト: 関数 () {
      vm = this とします
      textObj100 = {とする
        テキスト1: '123',
        テキスト2: '456'
        }
      vm.$set(vm.textObj,'text1',textObj100.text1) 
      //これはvm.$set(vm,'textObj',textObj100)と同等です
    },
    テキストArra: 関数() {
      vm = this とします
      textArr200 = ['a1','a2','a3'] とします。
      vm.$set(vm,'textArr',textArr200)
    },
    テキストJSONA: 関数() {
      vm = this とします
      textJson300 = [ とします。
        {t1: 't1'、t2: 't2'、t3: 't3'},
        {t4: 't4'、t5: 't5'、t6: 't6'}、
        {t7: 't7'、t8: 't8'、t9: 't9'},
      ]
      vm.$set(vm.textJson[1],'t5',textJson300[1].t5) 
      //これは vm.$set(vm,'textJson',textJson300) と同等です
    }
  }
}
</スクリプト>
<スタイル>
</スタイル>

補足: Vue は $set を使用してデータの属性を動的に設定します

実際の開発プロセスでは、モデルをフォーム要素にバインドするときに、バインドされた要素の属性がバックグラウンド データに基づいて動的に生成されます。従来の割り当て方法を使用すると、ビューを更新することはできません

使用する必要がある

this.$set(データ名、キー名、キー値)
エクスポートデフォルト{
 データ:{
  //まず空のオブジェクトformObjectを定義します:{},
  配列リスト:[],
 },
 マウント() {
  この.initPage()
 },
 方法:{
  initPage(){
   this.$store.dispatch(namespace/callData).then(res=>{
    // データのキーと値を設定する
    res.data.forEach(item=>{
     // ❗❗❗❗❗ this.formObject[item.name] = item.value // ❗❗❗❗ このメソッドはビューを更新できません this.$set(this.formObject, item.name, item.value) // ✅✅✅✅ビューを更新できます})
   })
   // 配列を変更します this.$store.dispatch(namespace/callData).then(res=>{
    // データのキーと値を設定する
    this.$set(this.arrayList,0,(res.data)[0].id) ✅✅✅✅ビューを更新できます})
  }
 }
}

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。

以下もご興味があるかもしれません:
  • Vue.set() と this.$set() の使い方と違い
  • Vue エラー TypeError の解決方法: this.$set は関数ではありません
  • Vue.set() this.$set() はビューの更新と考慮をトリガーします
  • Vue ソースコードから Vue.set() と this.$set() を解析する
  • Vue での this.$set の使用に関する詳細な説明

<<:  MySQL の nvl() 関数に似た ifnull() 関数についての簡単な説明

>>:  MySQL フルテキスト検索の中国語ソリューションとサンプルコード

推薦する

Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...

MySQL レプリケーションの詳細な説明と簡単な例

MySQL レプリケーションの詳細な説明と簡単な例マスタースレーブレプリケーション技術は、MySQL...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...

Docker プライベート ウェアハウスを構築する (自己署名方式)

作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...

MySQLのGROUP BYステートメントを最適化する方法

MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...

MySQL で数千万のテストデータを含むテストデータベースを作成する方法

場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...

Vueの監視プロパティの詳細な説明

目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...

HTMLとXHTML、HTML4とHTML5のタグの違いについて簡単に紹介します。

HTML と XHTML の違い1. XHTML要素は正しくネストされている必要がある2. XHT...

MySQLパスワードを変更するいくつかの方法

序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...

MySQLサービスを削除する具体的な方法

MySQLは次のエラーを表示します「コントロール パネル -> 管理ツール -> サービ...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...