前提
Vueにてdataに定義したフォーム値にDB側のデータを入れようとする中で
フォーム値側の連想配列のキーに一致するDB側のデータを代入、もしくは$setを使用しようとしています。
実現したいこと
項目が多いためfor文にてそれぞれの項目値を入れ
入れた後に画面側のフォームにも入力された値が表示されるようにする。
発生している問題・エラーメッセージ
実際に入れるとデバックツール(Chrome拡張)では代入、$setによるdataへの値が入力されますが
画面側ではフォームに値が反映されません。
該当のソースコード
html(vue)
1<input type="text" v-model="画面側data.test1"> 2<input type="text" v-model="画面側data.test2">
Javascript
1//質問用 2//Vue内対象data 3data: { 4 画面側data: { 5 test1: '', 6 test2: '', 7 }, 8} 9 10//DB取得ボタンを押すと 11for(var model_key of Object.keys(self.画面側data)){ //画面側で定義しているdata(連想配列) 12 for(var res_key of Object.keys(response.data['DB側data'])){ //DB側から来るdata(連想配列) 13 if(model_key == res_key){ 14 //下記どちらもdataに値は入るが画面側には反映されない 15 //self.画面側data[model_key] = response.data['DB側data'][res_key]; 16 //self.$set(self.画面側data, model_key, response.data['DB側data'][res_key]); 17 break; 18 } 19 } 20}
試したこと
Vueのリアクティブの仕様を確認したうえでいくつか試しましたが
1回1回代入する場合は問題ありませんでした。
そもそも代入はリアクティブにならない可能性があると書かれていましたが
特に$setでも代入でも関係なくforではない場合は画面側に反映されます。
またもともとの予定ではこの画面側dataに直接DB側dataをまるごと入れる予定でしたが
項目数の関係やこちらもリアクティブにならなかったため見送りました。
しかしこちらは別の画面では一応動きました。
Javascript
1//forを使用しない場合は正常に動く 2//1回目 3var model_key = 'test1'; 4var res_key = 'test1'; 5//下記どちらでも画面側にも反映される 6//self.画面側data[model_key] = response.data['DB側data'][res_key]; 7//self.$set(self.画面側data, model_key, response.data['DB側data'][res_key]); 8 9//2回目 10var model_key = 'test2'; 11var res_key = 'test2'; 12//下記どちらでも画面側にも反映される 13//self.画面側data[model_key] = response.data['DB側data'][res_key]; 14//self.$set(self.画面側data, model_key, response.data['DB側data'][res_key]); 15 16//もしくは直接行う場合でも問題なし 17//代入 18self.画面側data['test1'] = response.data['DB側data']['test1']; 19self.画面側data['test2'] = response.data['DB側data']['test2']; 20 21//$set 22self.$set(self.画面側data, 'test1', response.data['DB側data']['test1']); 23self.$set(self.画面側data, 'test2', response.data['DB側data']['test2']); 24 25//さらにもともとのまるごと入れるパターン(こちらも画面側に反映されない) 26//別の画面ではこちらで動く場合もある 27self.画面側data = response.data['DB側data'] 28
補足情報(FW/ツールのバージョンなど)
Vue.js 2.6.14
Vue.js devtools(Chrome拡張)
参照リンク
Vue公式
https://jp.vuejs.org/v2/guide/reactivity.html#%E9%85%8D%E5%88%97%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6
今回初めてのVue、Javascriptということもあり勉強不足だと思いますが
ご回答いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。