原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败

原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败

问题描述

vue-cli主要应用于单页面应用，很多时候我们并不去使用脚手架，但却也会在普通的H5项目中使用原生的vue进行便捷的数据绑定和回显。问题出自于原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败？

H5代码

	<div id="aside-wrap">
        <!--    博主信息    -->
        <div class="blogger-info aside-base">
            <img :src="bloggerInfo.picture" alt="博主头像" class="blogger-img">
            <p id="test">昵称：{{ bloggerInfo.nickname }}</p>
            <p>邮箱：{{bloggerInfo.email}}</p>
            <p>职业：后端开发工程师</p>
        </div>
    </div>

js代码

$(document).ready(function () {
    //侧边栏的vue
    let aside = new Vue({
        el: '#aside-wrap',
        data: {
            //博主信息
            bloggerInfo: '',
        },
        methods:{
            getBloggerInfo(){
                //请求博主信息
    			$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
        			this.bloggerInfo = data;
    			}, "json");
            }
        },
        //页面加载请求相应数据
        mounted() {
            this.getBloggerInfo();
        },
    });
});

预期中，在关于dom中绑定的关于bloggerInfo信息，应该在页面加载时向后端发送请求，然后将数据回显到页面当中才对，但是没有想象中的预期结果。

之后经过排查问题，才发现原来bloggerInfo并没有得到相应的数据。

问题原因

原来问题的原因是原生vue中使用jquery的ajax并不向vue的axios请求那样在回调函数中可以使用this，对vue中直接声明的属性赋值。
即问题出在以下代码中

	$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
        this.bloggerInfo = data;
    }, "json");

this.bloggerInfo并不是指代data中声明的bloggerInfo，所以这里的赋值是失败的。这里的this，应该指的是回调函数本身吧。

问题解决

所以可以直接使用vue的实例对象，直接完成赋值，即aside.bloggerInfo = data;

修改后代码如下：

$(document).ready(function () {
    //侧边栏的vue
    let aside = new Vue({
        el: '#aside-wrap',
        data: {
            //博主信息
            bloggerInfo: '',
        },
        methods:{
            getBloggerInfo(){
                //请求博主信息
    			$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
        			aside.bloggerInfo = data;
    			}, "json");
            }
        },
        //页面加载请求相应数据
        mounted() {
            this.getBloggerInfo();
        },
    });
});

根源性问题还是出现在this的指代问题上。