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 フルテキスト検索の中国語ソリューションとサンプルコード

推薦する

Node.jsとDenoの比較

目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...

MySQL 5.7 の Docker バージョンを MySQL 8.0.13 にアップグレードし、データを移行する

目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...

相同性とクロスドメイン、jsonp(関数カプセル化)、CORS原則の詳細な分析

目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

Hadoop 2.Xの新機能、ごみ箱機能の説明

ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル

ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...

JavaScript es6 の新しい配列メソッドの詳細な説明

目次1. 各() 2. arr.filter() 3. arr.every() 4. arr.map...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueのコントロール商品数量コンポーネントのカプセル化と使用は参考までに。具体的な内容は以下のとお...