I successfully get data from an Axios request. then assign to data users but it show error. Type Error: Cannot set properties of undefined (setting 'users').
here is my code.
<template>
<div class="p-5">
<h1 class="text-2xl mb-4">Certifly Live Video Chat </h1>
<div id ="users">
</div>
<div id="myid" class="grid grid-flow-row grid-cols-3 grid-rows-3 gap-4 bg-black/]">
<button class="btn btn-info" style="margin-right:5px" v-for="user in users" @click="getAccessToken(user.appt_room_name)" >
{{user.appt_admin_name}} {{user.appt_date_time}}
</button>
<br><br>
<div id="video-chat-window">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'video-chat',
data() {
return {
users:[]
};
},
methods : {
userRequests: function(){
axios.post(`/api/user_requests`)
.then(function (response) {
console.log(response.data)
this.users = response.data.data;
})
.catch(function (error) {
console.log(error);
})
},
},
mounted : function () {
this.userRequests();
}
}
</script>
console data [ { "id": 1, "appt_date_time": "03:00 - 03:15", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": "Hamza Shiraz", "appt_room_name": "RMX:280965", "created_at": "2021-12-21 14:50:59", "updated_at": "2021-12-21 14:50:59" }, { "id": 3, "appt_date_time": "04:30 - 04:45", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": "awais", "appt_room_name": "RMX:280965", "created_at": "2021-12-21 17:04:09", "updated_at": "2021-12-21 17:04:09" }, { "id": 4, "appt_date_time": "05:15 - 05:30", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": "awais", "appt_room_name": "RMX:280965", "created_at": "2021-12-21 17:06:50", "updated_at": "2021-12-21 17:06:50" } ];
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);
})
}
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)
})
},
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();
},
};
Assign to users[]
just response.data
and not response.data.data
. Here you have a functional example: https://codepen.io/jssDev-/pen/zYEExbq
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.