Javascript Vue - 无法在承诺中设置未定义的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43613115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue - Cannot set property of undefined in promise
提问by Phorce
So I have the following Vue file:
所以我有以下Vue文件：
<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
app.js:1769 未捕获（承诺）类型错误：无法设置未定义的属性“消息”
I have tried to create another method as well, but had no joy. I literally cannot seem to work out why thiswouldn't be accessible here.
我也尝试过创建另一种方法，但没有任何乐趣。我似乎无法弄清楚为什么this不能在这里访问。
回答by Cobaltway
Your context is changing: because you are using the keyword function, thisis inside its scope the anonymous function, not the vue instance.
您的上下文正在发生变化：因为您使用关键字function，this匿名函数在其范围内，而不是 vue 实例。
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 functionfor the top level of your methods (as shown in the example), because otherwise Vue can't bind the vue instance to this.
注意：顺便说一下，您应该继续在方法的顶层使用关键字function（如示例所示），否则 Vue 无法将 vue 实例绑定到this.
回答by sese smith
One can set thisto a constoutside the code block and use that const value to access the class properties.
可以设置this为const代码块外部的a并使用该 const 值来访问类属性。
ie
IE
const self = this;
blockMethod(function(data) {
self.prop = data.val();
})
回答by Andy Brown
There's another common reason which I keep bumping into why you'll get this error message. If you use v-if rather than v-show to hide an item, it won't be in the DOM, won't load initially and won't be available to reference. I just spent a while working out why this gave the error message above:
还有另一个常见原因，我一直在想为什么您会收到此错误消息。如果你使用 v-if 而不是 v-show 来隐藏一个项目，它不会在 DOM 中，最初不会加载，也不会被引用。我只是花了一段时间弄清楚为什么会出现上面的错误消息：
vm.$refs.refpersonview.Person = ...
The reason is that I'd conditionally hidden the component in a v-if block. Use v-show instead!
原因是我有条件地将组件隐藏在 v-if 块中。改用 v-show！
回答by Pablo Fernandez
created() {
pipedrive.getAllDeals()
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
// async / await version (created() becomes async created())
//
// try {
// const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
// this.posts = response.data
// } catch (e) {
// this.errors.push(e)
// }
}
}
回答by Cong Nguyen
Use arrow function in promise then you can access 'this' object.
在 promise 中使用箭头函数，然后您就可以访问“this”对象。
loadData: function() {
Vue.http.get('/notifications').then(response => {
console.log(response.data);
//this.message = 'Something'
});
}
