インターネット上の 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 を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。 以下もご興味があるかもしれません:
|
<<: MySQL の nvl() 関数に似た ifnull() 関数についての簡単な説明
>>: MySQL フルテキスト検索の中国語ソリューションとサンプルコード
目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...
目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...
目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...
目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...
ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...
1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...
ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...
インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...
これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...
目次1. 各() 2. arr.filter() 3. arr.every() 4. arr.map...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...
Vueのコントロール商品数量コンポーネントのカプセル化と使用は参考までに。具体的な内容は以下のとお...