在Vue组件的mounted生命周期钩子中，通过axios获取数据并赋值给`data`中的`datas`，虽然控制台显示数据已获取，但在模板中{{ datas }}显示为空。问题出在`.then`的回调函数作用域上，使用箭头函数可以正确绑定`this`，而普通函数会导致`this`指向错误。解决方案是将`.then`的回调改为箭头函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="data">{{datas}}</div>
<script type="text/javascript">
new Vue({
el:'#data',
data:{
datas:null
},
mounted:function(){
const params = new URLSearchParams();
params.append('type', 'queryHeadCarousel');
axios
.post('https://xxxx/php.php',params)
.then(function(response){
this.datas = response;
console.log(this.datas);
})
.catch(function (error) { // 请求失败处理
console.log(error);
})
}
})
</script>
</body>
</html>
我在mounted周期中访问数据接口并取得数据对象，并赋给datas，此时控制台打印datas含有数据，但是在dom中访问{{datas}}却为空？
初学vue，各位能不能帮忙解解惑？
//
找到原因了，下面第一种写法就行，第二种就不行。
弱弱问一句有啥区别吗？0.0
第一种：
.then(response => (this.datas= response.data))
第二种：
.then(function(response){
this.datas = response.data;
})
扫一扫
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
