Vue.js:每次渲染视图时都会产生不良影响
Vue.js: unwanted effect every time the view is rendered
问题是在视图之间浏览时,导致这种效果。首先呈现状态活动(灰色),然后呈现状态完成(红色)。我不知道我是以错误的方式构建它还是它的正常行为
我在这个视图中有以下内容:
模板
<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>
问题是在视图之间浏览时,导致这种效果。首先呈现状态活动(灰色),然后呈现状态完成(红色)。我不知道我是以错误的方式构建它还是它的正常行为
我在这个视图中有以下内容:
模板
<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>