Vue.js+axiosで繰り返しデータを更新したい

Question

Vue.js+axiosで定期的に取得したデータを更新したいのですが、動的に取得したデータがHTMLに反映されません。

どのようにすれば良いかご教示ください。

$(function(){
    var app = new Vue({
        el: '#app',
        data:{
            hoge : "",
            huga: "",
        },
        mounted(){
            axios.get('/json').then((response) => {
                this.data = response.data;
            }).catch( error => { console.log(error); });
        }
    });

    setInterval(function() {
        axios.get('/json').then((response) => {
            app.data = response.data;
        }).catch( error => { console.log(error); });
    }, 10000);
});

Answer 1

動かしたわけではないので確かではないですが、ソースを見た感じ

mountedがmountedとして認識されてなさそう
mountedの説明

//      mounted(){
        mounted: function () { // ←ここ
            axios.get('/json').then((response) => {
                this.data = response.data;
            }).catch( error => { console.log(error); });
        }

外部からのdataのアクセスには$がいるのでは？

   setInterval(function() {
        axios.get('/json').then((response) => {
            app.$data = response.data; // ←ここ
        }).catch( error => { console.log(error); });
    }, 10000);

あと、Vueはdataのプロパティを監視してると思うので、dataを丸ごと入れ替えたら変更を検知してくれないんじゃないでしょうか。

Vue dataの説明リンク

Vue インスタンスのためのデータオブジェクトです。Vue.js は再帰的にインスタンスのプロパティを getter/setter に変換し、”リアクティブ” にします。

恐らくレスポンスで戻ってくるのJSONだと思うので、この辺も読まれておいたら躓きが減るかもしれません。
オブジェクトの変更監視の注意点

axiosはサッパリなので他の方にお任せします・・・。
解決するといいですね。

Comments

[weblog_life]

ご回答ありがとうございます。

>外部からのdataのアクセスには$がいるのでは？
>あと、Vueはdataのプロパティを監視してると思うので、dataを丸ごと入れ替えたら変更を検知してくれないんじゃないでしょうか。

こちらおっしゃる通りでした。

受け取ったデータに＄を付与、配列毎に入れ替えで無事動作しました。

Answer 2

$(function(){
    var app = new Vue({
        el: '#app',
        data:{
            hoge : "",
            huga: "",
        },
        mounted(){
            axios.get('/json').then((response) => {
                this.$data.hoge = response.data.hoge;
                this.$data.huga = response.data.huga;
            }).catch( error => { console.log(error); });
        }
    });

    setInterval(function() {
        axios.get('/json').then((response) => {
            app.$data.hoge = response.data.hoge;
            app.$data.huga = response.data.huga;
        }).catch( error => { console.log(error); });
    }, 10000);
});