I'm running into an issue when trying to load my website. https://i.sstatic.net/4a2GS.png
This is the code I am working with:
<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("An error occurred: " + error.response);
});
},
},
created() {
this.getBookings();
},
};
I have defined the data to be rendered and included a v-if statement in my template. Can you help me identify where I might be making a mistake? Thank you for your help!