原生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的指代问题上。