uniapp數據更新頁面視圖不更新

在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的變化來進行視圖強制重新渲染

 

注意:重新渲染的狀態建議綁定在需要重新渲染的標籤模塊上,避免其他的標籤也出現閃爍的情況

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章