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的变化来进行视图强制重新渲染

 

注意:重新渲染的状态建议绑定在需要重新渲染的标签模块上,避免其他的标签也出现闪烁的情况

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