在watch函數中監聽數據的變化,然後改變需要刷新的視圖綁定的顯示與否的關鍵字,強制重新渲染
<template v-if="update">
<!-- 單選 -->
<radio-group v-if="data.question.type==1" name="answer" @change="addAnswer">
<view v-for="(item,index) in data.answer " style="padding-bottom: 15rpx;">
<label>
<radio :value="item.answerSerialNumber" /><text style="margin-right: 10px;">{{item.answerSerialNumber}}</text><text>{{item.answerContent}}</text>
</label>
</view>
</radio-group>
<!-- 多選 -->
<checkbox-group name="answer" v-if="data.question.type==2" @change="addAnswer">
<view v-for="(item,index) in data.answer " style="padding-bottom: 15rpx;">
<label>
<checkbox :value="item.answerSerialNumber" /><text style="margin-right: 10px;">{{item.answerSerialNumber}}</text><text>{{item.answerContent}}</text>
</label>
</view>
</checkbox-group>
</template>
export default {
data() {
return {
data: {
answer: [], //本題的選項
question: {
type: 3
},
trueAnswer: "" //實際正確的答案
},
answer: "", //用戶選擇的答案
userIsTrue: false,
tihao: 1,
clickSubmit: false,
noMore: false,
aa: {
ststus: true
},
update: true
}
},
onReady() {},
onShow() {},
watch: {
// 解決現象數據重新刷新但是視圖不刷新的情況
data: function(a) {
this.update = false;
setTimeout(() => {
this.update = true;
}, 0)
}
},
此處在是watch中監聽data的變化來進行視圖強制重新渲染
注意:重新渲染的狀態建議綁定在需要重新渲染的標籤模塊上,避免其他的標籤也出現閃爍的情況