Vue中ajax返回的結果賦值

這是第二次在項目中遇到此問題，ajax請求成功后在success函數中為Vue實例data里的變量賦值，卻失敗了

new Vue({
    el:'#app',
    data:{
        msg:''
    },
    created:function(){
        $.ajax({
            url:'',  
            data:'',
            dataType:'json',
            success:function(res){
                this.msg = res.data;
            }   
        })
    }
})

原因在於在ajax的success函數中，this的指向不再是vue的實例
解決辦法可以先把this保存起來

new Vue({
    el:'#app',
    data:{
        msg:''
    },
    created:function(){
        var that = this;
        $.ajax({
            url:'',  
            data:'',
            dataType:'json',
            success:function(res){
                that.msg = res.data;
            }   
        })
    }
})

也可以將vue實例賦值給變量，再通過變量來訪問其數據，實例化后window里會有vm實例對象，底層會把data里的屬性掛載到vm實例對象上作為vm的屬性

var vm = new Vue({
    el:'#app',
    data:{
        msg:''
    },
    created:function(){
        $.ajax({
            url:'',  
            data:'',
            dataType:'json',
            success:function(res){
                vm.msg = res.data;
            }   
        })
    }
})

參考資料

Vue中ajax賦值問題