質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1197閲覧

Vueによる配列を更新時にリアクティブに動かない理由

engineer_heroku

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/07/29 13:34

前提

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ということもあり勉強不足だと思いますが
ご回答いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。

結論から行きますと代入時のDB側のデータがnullの場合その後のどこかでエラーが起こり
リアクティブが中断されていたようです。
DB側のデータがnullの場合空を入れるように修正し解消しました。

問題のnullを代入しようとした際にエラーになる原因が
現状値を入れる以外の他の処理が存在せず原因箇所が不明なため
こちらについては引き続き調査しようと思っています。

投稿2022/08/04 10:26

engineer_heroku

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問