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?

It takes a while for the request to finish, and quotes is null before that. Your first attempt works fine because {{ null }} will simply render nothing, but you cannot access "the first element" of null. Use conditional rendering or something like {{ quotes && quotes[0] }} — user5734311
– user5734311, Commented Oct 14, 2021 at 13:54

Dmitrii Zolotuhin · Accepted Answer · 2021-10-14 13:51:11Z

2

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]

answered Oct 14, 2021 at 13:51

Dmitrii Zolotuhin

4422 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radlantic Over a year ago

thanks very much - It seems obvious now its been explained :)

Collectives™ on Stack Overflow

Vue.js cannot access elements within object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related