[Vuejs]-Vue.js: unwanted effect every time the view is rendered

by

0👍

✅

I think it is normal behavior because the data of checked category is taken from this.getCatLevel() which is an async function, so your items will be rendered earlier before the data is fully loaded. My suggestion is to add some loading information in the UI, or you hide it when the data is not fully loaded like by adding a data variable isLoading then call it inside getCatLevel(), for the example:

getCatLevel(){
this.isLoading = true; //set the loading value to true before calling data
....
.catch(function(error) {
  console.log("Error getting documents: ", error);
}).finally(()=> {this.isLoading = false}); // set loading value to false when data is fully loaded
....

then call it in the element

<div v-if="!isLoading" class="col"  v-for="item in category" v-bind:key="item.id">
    <router-link :id="item.id" class="btn-category" :class="item.status"
       v-bind:to="{ name: 'words', params : { id: item.id} }" >
         <span>{{item.content}}
           <div class="icon-circle" > 
              <icon v-if="item.status == 'cat-done'" name="check" class="icon icon-s"></icon>
              <icon v-else name="arrow-go" class="icon icon-s"></icon>
           </div> 
         </span>
    </router-link>
 </div>

Leave a comment