关于vue中使用ajax页面不更新问题

使用背景:

    改变的内容： 

treeListOne: []

  使用ajax来更新data属性，发现页面没更新，例子如：

            

$.ajax({
    url: '/api/get_biz_inst_topo/',
    type: 'post',
    dataType: 'json',
    data: JSON.stringify({bk_biz_id: this.bus_val}),
    success: function (response) {
        if (response.status === true) {
            console.log(response.data);
            // this.treeListOne = JSON.parse(JSON.stringify(response.data));
            //this.treeListOne = [];
            console.log(this)
            //this.treeListOne = JSON.stringify(response.data)
            this.treeListOne = JSON.stringify(response.data)
            console.log(this.treeListOne)
        }
    },
    error: function (data) {
        console.log(data)
    }
})

发现页面没更新，treeListOne 好像变了，其实你打印ajax里的this会发现这值怎么是个字符串？

其实问题就是这里的this就是指向ajax，而不是vue，所以这里对数据不会产生变动。

解决：
1、可以用axios(双箭头), 这个指向vue本身，可以对data属性进行赋值。

axios({
   url: "/api/get_biz_inst_topo/",
   method: 'post',
   responseType: 'json', // 默认的
                data: JSON.stringify({bk_biz_id: this.bus_val}),
}).then(res => {
    if (res.data.status) {
        console.log(res.data.data)
                    console.log(this)
                    this.treeListOne = res.data.data
                }
})

2、ajax或axios 外层加个var变量,如

var that = this
$.ajax({
    url: '/api/get_biz_inst_topo/',
    type: 'post',
    dataType: 'json',
    data: JSON.stringify({bk_biz_id: this.bus_val}),
    success: function (response) {
        if (response.status === true) {
            console.log(response.data);
            // this.treeListOne = JSON.parse(JSON.stringify(response.data));
            //this.treeListOne = [];
            console.log(this)
            //this.treeListOne = JSON.stringify(response.data)
            that.treeListOne = response.data

        }
    },
    error: function (data) {
        console.log(data)
    }
})

参照：Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新_weixin_55560445的博客-CSDN博客