[Vuejs]-How comes Vue's shared state does not get updated without parseInt?

by

2👍

✅

The only reasonable explanation for this is that the ready is not a number but a String. I can’t see the rest of the code, so I’m making assumptions here, but this is likely because your data is coming from a REST API as JSON object/array where the ready is numeric value, but in quotes.

if you check truthiness of a string "0", it is true, which is why you need the parseInt.

you can validate that either using typeof in your component, or just see the data from the network panel in the dev tools.

example test:

<ul>
   <li v-for="book in this.books.all">
      <p v-text="typeof(book.ready)">
   </li>
</ul>

As a side note, you should avoid functions in your template and prefer to use computed, this improves performance since the computed values get cached

<ul>
   <li v-for="book in filteredBooks">
      <p v-text="book.name">
   </li>
</ul>

computed:{
   filteredBooks: function(){
      return this.books.all.filter(filterBook => parseInt(filterBook.ready))
   }
}
👤Daniel

1👍

Just in case if anyone else ends up here. I found out that the reason why I had to use parseInt(), it’s because I was using Axios to get data from the back-end and Axios returns a string for long data instead of an object.

When I was testing this by checking the typeof for filterBook.ready, it was returning number because the data I was getting from the back-end for the test was not that long.

👤Mohammed

Leave a comment