Vue.jsのバリデーション実行時にセッションで上書きしたいが、初期データが設定されてしまう

前提・実現したいこと

画面表示時、入力画面を開いた場合に、画面上の入力項目にはセッション情報から設定しています。
しかし、JQueryにより画面上の入力項目の値を元に表示切り替えを行っていますが、セッション情報ではなく、（プログラム上の）初期値をもとに切り替えが行われてしまいます。
おそらく、セッション情報が設定される前（入力項目に初期データが設定されている状態）に、JQueryの表示切り替えが実行されてしまっているためと思われます。

例えば以下のソースでは、セッションを設定していますが、category= 1の内容で画面表示されてしまいます。

そして気になる点としては、以下の警告が表示されていることです。
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

発生している問題・エラーメッセージ

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

該当のソースコード

Vue.js
1data: {
2       
3        url: "",
4       category: 1,
5        errors: {},
6    },
7    created: function() {
8        let count_data = 0;
9        for (let key in old_data) {
10            if (old_data[key] != null && old_data[key] != "") {
11                count_data += 1;
12            }
13        }
14        if(count_data > 0) {
15            for(let key in old_data){
16                this.$set(this, key, old_data[key]);
17            }
18        }else{
19              //セッションのデータを表示されます。
20            let that = this;
21            axios.get('api/getSession')
22                .then(res => {
23                    Object.entries(res.data).map(function(data){
24                        that.$set(that, data[0], data[1]);
25                    });
26                })
27        }
28    },

行動規範の内容に同意します

回答2件

自己解決

初期データ設定する時とセッションがある時処理を分けます

投稿2019/07/23 09:04

kaori_luna

総合スコア14

           this.$set(this, key, old_data[key]);

this.$set(key, old_data[key]) の気もします。
thisを第一引数として渡すのはVue.$setの場合だと思います。

あと、 res => {/*...*/}なので thatは不要です。あっても良いですが。

投稿2019/05/29 10:35

otolab

総合スコア765

kaori_luna

2019/05/29 10:38

ご回答ありがとうございます。 this.$set(key, old_data[key])は入力データを表示するためです。でも今回テストはセッションがある場合はだから絶対に　 `` for (let key in old_data) { this.$set(this, key, old_data[key]); } `` 呼ばれないです。 axiosの中に、thisが動かないので、thatを使っています。