Vue.js cannot access elements within object

Question

I hope someone can explain this to me..

I am using axios to fetch json from a webpage. I can get the data and output it to my html without issue, but when i try to access a single element I get an error "Cannot read properties of null (reading '0')"

Here is my JS code:

//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')

I can access my data fine like this:

<!--index.html-->
...
<div id="app">
    <div>
      {{ quotes }}
    </div>
  </div>
...

which outputs:

[ { "quote": "Life isn't about getting and having, it's about giving and being.", "author": "Kevin Kruse" }, ...]

But when I try:

<!--index.html-->
...
<div id="app">
  <div>
    {{ quotes[0] }}
  </div>
</div>
...

I get the error message:

Uncaught TypeError: Cannot read properties of null (reading '0')

Can anyone help me understand how I can access a single element within my quotes object?

Answer 1

You trying to access an object before initialization. Try:

<div id="app">
  <div v-if="quotes">
    {{ quotes[0] }}
  </div>
</div>

At the time when the first render happened your quotes === null . And it is not possible to do null[0] . After API call you assign an object to quotes and only after rerender you able to get quotes[0]