(已解决)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"
})
}
}