(已解决)uni-app 中对 data 的修改视图未更新的坑

之前用过RN/flutter/小程序等语言。他们都是通过setState({})(小程序setData)来更新视图。而这uni app 的话我都试过了,没反应。。。
后来百度了好久才解决。。。

也就是this.$set()方法来解决。格式this.$set( target, key, value )

this.$set(this.items[0], 'message', 'one1', );

例如:

export default {
	data () {
		return {
			title: "Hello",
                        items: [
                            { message: "one", id: "1" },
                            { message: "two", id: "2" },
                            { message: "three", id: "3" }
                        ]
		}
	},

	/**
	* 更改题目-title
	*/
	updateTitle() {
	   this.title = "你要改的新值"
	},

       /**
	 * 更改数组的元素
	 */
	updateItems() {
		//格式this.$set( target, key, value )

		//第一种方式
		this.$set(this.items[0], 'message', 'one1', ); //改成数字类型就不用了加引号

		//第二种方式
		this.$set(this.items, 0, {
			message: "one3",
			id: "13"
		})
	}
}
posted @ 2021-03-03 11:26  nur01  阅读(4060)  评论(0编辑  收藏  举报