0
155
VistasVue: propiedad a la que se accede durante el renderizado pero no definida
Recibo un error cuando cargo mi sitio web. 
Mi código se ve así:
<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(); }, };Definí los datos renderizados e incluso agregué un v-if a mi plantilla. ¿Dónde cometo un error? ¡Gracias de antemano!
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
Porque lo define como indefinido en su objeto de datos.
Haga la llamada axios dentro de la función async created() y asígnela a this.bookings, entonces debería desaparecer.
use esperar en lugar de devoluciones de llamada en getBookings y luego haga esto.
async created(){ this.bookings = await this.getBookings(); }
·
Santiago Trujillo
Denunciar
0
Después de cambiar el nombre de reservas a reserva y definirlo como el código a continuación, funcionó perfectamente.
data() { return { bookings: [], }; },
·
Santiago Trujillo
Denunciar
Responde la pregunta