Vue.js：每次渲染视图时都会出现不需要的效果

问题描述

问题是在视图之间浏览时，导致这种效果。首先渲染状态 active（灰色），然后渲染状态 Done（红色）。我不知道我是在以错误的方式构建它还是它的正常行为

我在这个视图中有以下内容：

模板

 <div 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>

然后

data(){
    return {
      id:'',category:[],countCatDone:0,}
 },created(){
        this.getCatLevel()
    },

 getCatLevel(){
    this.id = this.$route.params.id
        db.collection("da-content").where("contenido_id","==",this.$route.params.id )
        .get()
        .then( query=> {    
            let items = [] 
            query.forEach( doc => {
                let object = doc.data();
                object.id = doc.id;
                object.status = "null";
                db.collection("da-content-log").where("contenido_id",doc.id)
                .where("usuario_id",this.user.email )
                .get()
                .then(respond => {
                    if(respond.empty){
                        object.status = "cat-active";
                    } else {
                        respond.forEach((doc) => {
                            object.status = doc.data().status;
                            if (object.status == "cat-done") {
                                this.countCatDone++
                            }
                        })
                    }    
                })
                .catch(function(error) {
                    console.log("Error getting documents: ",error);
                });
                items.push(object);
            });
            this.category = items;                        
            
        })
},

谢谢！

解决方法

我认为这是正常行为，因为检查类别的数据取自 this.getCatLevel()，它是一个 async 函数，因此您的项目将在数据完全加载之前更早呈现。我的建议是在 UI 中添加一些 loading 信息，或者在数据未完全加载时隐藏它，例如通过添加数据变量 isLoading 然后在 getCatLevel() 中调用它，以便例子：

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
....

然后在元素中调用它

<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>