0
140
ViewsVue: Property accessed during render but not defined
I receive an error when I load my website. 
My code looks like that:
<div v-if="bookings">
<div class="row">
<div
class="col-12 m-2"
v-for="booking in bookings"
:key="booking.booking_id"
>
<BookingListItem :booking="booking" />
</div>
</div>
</div>
......
data() {
return {
boookings: undefined,
};
},
computed: {
...mapState({
user: (state) => state.patient,
}),
},
methods: {
getBookings() {
this.id = this.user.id;
console.log(this.id);
return axios
.get('URL/patients/${this.id}/bookings')
.then((response) => {
this.bookings = response.data;
})
.catch((error) => {
console.log("Ein Fehler ist aufgetreten: " + error.response);
});
},
},
created() {
this.getBookings();
},
};
I defined the rendered data and even added an v-if to my template. Where do I make a mistake? Thank you in advance!
·
Santiago Trujillo
2 answers
Answer question0
Cause you define it as undefined in your data object.
Make the axios call inside async created() function and assign it to this.bookings, then it should be gone.
use await instead of callbacks on the getBookings and then do this.
async created(){
this.bookings = await this.getBookings();
}
·
Santiago Trujillo
Report
0
After I renamed boookings to booking and defined it like the code below, it worked perfectly.
data() {
return {
bookings: [],
};
},
·
Santiago Trujillo
Report
Answer question