Vue - Cannot Set Property Of Undefined In Promise
Solution 1:
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.
Solution 2:
One can set this to a const outside the code block and use that const value to access the class properties.
ie
const self = this;
blockMethod(function(data) {
self.prop = data.val();
})
Solution 3:
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:
vm.$refs.refpersonview.Person = ...
The reason is that I'd conditionally hidden the component in a v-if block. Use v-show instead!
Solution 4:
Use arrow function in promise then you can access 'this' object.
loadData: function() {
Vue.http.get('/notifications').then(response => {
console.log(response.data);
//this.message = 'Something'
});
}
Solution 5:
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)// }}
Post a Comment for "Vue - Cannot Set Property Of Undefined In Promise"