问题

data对象在js中重新赋值时页面无法同步刷新

案例一（固定对象）

这样写页面中有时候this.formData.name赋的值在页面中无法显示

<template>
	<view>
		<uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
		}
	},
	onLoad() {
		this.loadPageList();
	},
	methods: {
		loadPageList() {
			this.formData.name = '张三';
		},
	},
}
</script>

改成这样即可（在data对象中预先声明好）

<template>
	<view>
		<uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: ''
			},
		}
	},
	onLoad() {
		this.loadPageList();
	},
	methods: {
		loadPageList() {
			this.formData.name = '张三';
		},
	},
}
</script>

案例二（集合遍历）

集合中的对象替换了值，但是无法页面同步刷新，然后加个tempCount 变量在外面的加一，触发更新机制

<template>
	<view>
		假设这里是个集合（太懒了，不想写）
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			tempCount: 0,
		}
	},
	onLoad() {
		this.loadPageList();
	},
	methods: {
		loadPageList() {
			// 动态加载
			this.dataList = [
				{
					name: '张三1',
				},{
					name: '张三2',
				},
			]
		},
		updateName(index){
			this.dataList[index].name = '王二麻子';
			this.tempCount ++; // 这个就是用来触发data下的对象同步页面的
		},
	},
}
</script>