vue+jquery。用$.ajax发送请求更新数据，数据更新了，但是页面没有变化

Question

问题描述

vue+jquery。用$.ajax发送请求更新数据，数据更新了，但是页面没有变化

相关代码

data: {
    myData:[];
}
methods:{
    get:function(){
        $.ajax({
            url: "http://XXXX",
            type: "GET",
            data:{},
            success: function(res){
            // console.log(res[1]);
            his.myData = res[1];
            console.log(this.myData);
            },
        })
    }
}
    
<ul>
    <li class="text-left" v-for="(item, index) of myData">{{item}}</li>
</ul>
<p class="text-info" v-show="myData.length == 0">暂无数据...</p>
                

结果

结果console.log(this.myData)已经更新；但是视图没有更新，仍旧显示暂无数据

Answer 1

this指向的问题，代码如下：

data: {
    myData:[];
}
methods:{
    get:function(){
        $.ajax({
            url: "http://XXXX",
            type: "GET",
            context: this, // 把vue实例传过去或者使用箭头函数
            data:{},
            success: function(res){
            // console.log(res[1]);
            this.myData = res[1];
            console.log(this.myData);
            },
        })
    }
}
    
<ul>
    <li class="text-left" v-for="(item, index) of myData">{{item}}</li>
</ul>
<p class="text-info" v-show="myData.length == 0">暂无数据...</p>

Answer 2

老哥代码复制的错误有点多啊

Answer 3

his.myData = res[1];

改成
this.myData.push(...res[1])
注意上下文