Vue - 无法在承诺中设置未定义的属性 [英] Vue - Cannot set property of undefined in promise
问题描述
所以我有以下 Vue 文件:
<li class="通知新"><a href="" data-toggle="dropdown"><i class="fa fa-bell-o"></i><sup><span class="counter">0</span></sup></a><div class="下拉菜单通知-下拉菜单动画flipInX"><ul v-for="通知中的通知" @click="" class="notifications-container"><li><div class="img-col"><div class="img" style="background-image: url('assets/faces/3.jpg')"></div><脚本>导出默认{数据:函数(){返回 {通知:[]，信息: ""，}},方法: {加载数据:函数(){Vue.http.get('/notifications').then(function(response) {控制台日志(响应数据)；//this.notifications = response.data;//this.notifications.push(response.data);this.message = "这是一条消息";控制台日志(this.message)；});},},安装(){this.loadData();},}
这编译得很好，但是，当加载网页时，我收到以下错误:
<块引用><块引用>app.js:1769 Uncaught (in promise) TypeError:无法设置未定义的属性消息"
我也尝试过创建另一种方法，但没有任何乐趣.我似乎无法弄清楚为什么 this 在这里无法访问.
您的上下文正在发生变化:因为您使用了关键字 function，this 在其范围内匿名函数，而不是 vue 实例.
改用箭头函数.
loadData: function() {Vue.http.get('/notifications').then((response) => {控制台日志(响应数据)；//this.notifications = response.data;//this.notifications.push(response.data);this.message = "这是一条消息";控制台日志(this.message)；});},注意:顺便说一下，您应该继续使用关键字function作为方法的顶级(如示例所示)，否则Vue不能t 将 vue 实例绑定到 this.
So I have the following Vue file:
<template>
<li class="notifications new">
<a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
<span class="counter">0</span>
</sup>
</a>
<div class="dropdown-menu notifications-dropdown-menu animated flipInX">
<ul v-for="notification in notifications" @click="" class="notifications-container">
<li>
<div class="img-col">
<div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
</div>
</li>
</ul>
</div>
</li>
</template>
<script>
export default {
data: function() {
return {
notifications: [],
message: "",
}
},
methods: {
loadData: function() {
Vue.http.get('/notifications').then(function(response) {
console.log(response.data);
//this.notifications = response.data;
//this.notifications.push(response.data);
this.message = "This is a message";
console.log(this.message);
});
},
},
mounted() {
this.loadData();
},
}
</script>
This is compiling just fine, however, when loading up the web page, I get the following error:
app.js:1769 Uncaught (in promise) TypeError: Cannot set property 'message' of undefined
I have tried to create another method as well, but had no joy. I literally cannot seem to work out why this wouldn't be accessible here.
Your context is changing: because you are using the keyword function, this is inside its scope the anonymous function, not the vue instance.
Use arrow function instead.
loadData: function() {
Vue.http.get('/notifications').then((response) => {
console.log(response.data);
//this.notifications = response.data;
//this.notifications.push(response.data);
this.message = "This is a message";
console.log(this.message);
});
},
NB: You should by the way continue to use the keyword function for the top level of your methods (as shown in the example), because otherwise Vue can't bind the vue instance to this.
这篇关于Vue - 无法在承诺中设置未定义的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
