インターネット上の 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 フルテキスト検索の中国語ソリューションとサンプルコード
目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...
MySQL レプリケーションの詳細な説明と簡単な例マスタースレーブレプリケーション技術は、MySQL...
HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...
知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...
作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...
参照: https://www.jb51.net/article/112612.htmシステム内のJ...
MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...
場合によっては、MySQL が公式に提供しているテスト ライブラリに基づいてテスト データを作成し、...
目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...
まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...
目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...
HTML と XHTML の違い1. XHTML要素は正しくネストされている必要がある2. XHT...
序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
MySQLは次のエラーを表示します「コントロール パネル -> 管理ツール -> サービ...
怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...