espero que alguien me pueda explicar esto..
Estoy usando axios para obtener json de una página web. Puedo obtener los datos y enviarlos a mi html sin problemas, pero cuando trato de acceder a un solo elemento aparece el error "No se pueden leer las propiedades de nulo (leyendo '0')"
Aquí está mi código JS:
//app.js const app = { data() { return { quotes: null, } }, mounted() { axios .get('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/') .then(response => (this.quotes = response.data.quotes) ) }, methods: { test() { console.log(Object.keys(this.quotes)) console.log(this.quotes) } } } Vue.createApp(app).mount('#app')Puedo acceder a mis datos bien así:
<!--index.html--> ... <div id="app"> <div> {{ quotes }} </div> </div> ...que salidas:
[ { "quote": "La vida no se trata de obtener y tener, se trata de dar y ser"., "author": "Kevin Kruse" }, ...]
Pero cuando intento:
<!--index.html--> ... <div id="app"> <div> {{ quotes[0] }} </div> </div> ...Recibo el mensaje de error:
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo '0')
¿Alguien puede ayudarme a entender cómo puedo acceder a un solo elemento dentro de mi objeto de cotizaciones?
Intenta acceder a un objeto antes de la inicialización. Probar:
<div id="app"> <div v-if="quotes"> {{ quotes[0] }} </div> </div> En el momento en que ocurrió el primer render, sus quotes === null . Y no es posible hacer null[0] . Después de la llamada API, asigna un objeto a las quotes y solo después de volver a procesar puede obtener quotes[0]