2👍
You don’t have access to this
in your .then
callback. So you’re trying to assign something to users
on undefined.
This article explains the reason why.
Try changing your promise callback to use an arrow function, such as:
userRequests: function() {
axios.post('/api/user_requests')
.then(response => {
console.log(response.data)
this.users = response.data.data;
})
.catch(function (error) {
console.log(error);
})
}
- [Vuejs]-Vue.js pass function to component as prop
- [Vuejs]-Vue.js Transitions and effects executing out of order
1👍
Try this way
export default {
name: "videoChat",
data() {
return {
users: [],
};
},
methods: {
async userRequests() {
try {
const { data } = await axios.post(`/api/user_requests`);
this.users = data;
} catch (error) {
console.log('error', error)
}
},
},
mounted() {
this.userRequests();
},
};
- [Vuejs]-Error: Can't set headers after they are sent.
- [Vuejs]-Load a combo with AJAX in VueJS (onLoad)
1👍
Assign to users[]
just response.data
and not response.data.data
. Here you have a functional example:
https://codepen.io/jssDev-/pen/zYEExbq
1👍
If you don’t want to use arrow
function, you can also save this
reference and use it later in the function. Make sure to do this before the axios
call.
userRequests: function() {
let vm = this
axios.post(`/api/user_requests`).then(function (response) {
vm.users = response.data.data
}).catch(function (error) {
console.log(error)
})
},
Source:stackexchange.com