<template> <article class="message is-warning"> <div class="message-header"> <span>Code Quotes</span> </div> <div class="message-body"> <span v-html="fetchedQuotes.data.quote"></span> <span>{{fetchedQuotes.data.author}}</span> </div> </article> </template> <script> export default { data(){ return { fetchedQuotes: [], contentUrl: "https://apiurl.tld/" }; }, mounted() { this.getQuotes(this.contentUrl, "quotes"); }, methods: { async getQuotes(url, collection) { try { let response = await fetch(url + collection+"/"+Math.ceil(Math.random()*6)); this.fetchedQuotes = await response.json(); } catch (error) { console.log(error); } } } }; </script>Estoy tratando de obtener cotizaciones aleatoriamente de una API de proyecto de Directus. Pero este código sigue dándome el error :
No capturado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'cita').
Probé varias soluciones diferentes, pero ahora estoy atascado y necesito ayuda para descubrir qué impide que este código funcione.
Cualquier ayuda será apreciada.
El problema es que está intentando acceder a fetchedQuotes.data.quote antes de que se obtenga. Para manejar esto, verifique si sus fetchedQuotes no están vacías en su etiqueta html
<span v-html="fetchedQuotes.data.quote" v-if="fetchedQuotes.length != 0"></span>