uniapp对象赋值回显失败,uniapp替换对象里面的值页面没有刷新,uni-app赋值对象后页面没有同步更新

7 篇文章 0 订阅
6 篇文章 0 订阅

问题

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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值