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

__EOF__

本文作者Nurmemet
本文链接https://www.cnblogs.com/nurmemet/p/14473421.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   nur01  阅读(4563)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示