查看详情

uni-app开发微信小程序时vue绑定数据不更新的原因总结

在开发小程序的时候,经常遇到vue页面通过JS代码更新页面数据的时候,页面上的数据并没有更新过来,特别是使用uni-app,经过多次测试,得出如下结论

1、当页面中的参数类型为json格式时,如果参数的索引键为数字,可能会出现页面数据不更新,如下:

data() {

return {

orderList:{},

}

}

大部分情况下,orderList参数的值可能是通过ajax远程获取的服务器上的数据,如果服务器上返回的数据是这样的{"3":{"title":"标题1"},"6":{"title":"标题2"}},此时,如果在页面中通过orderList[3]['title']="新标题1",就会出现页面数据不更新的情况,解决的办法,将参数类型设置为数组,如:orderlist:[]


2、向页面中的json参数追加字段时,如下:

data() {

return {

goodsList:{},

}

}

假如服务端返回的数据是[{"itemID":1,"title":"标题1"},{"itemID"2,"title":"标题2"}],在程序中直接通过JS追加字段,如:goodsList[1]['active']=1,这种情况下,页面中对active显示处理时,可能会出现不更新的情况,解决的办法是在获取到服务端返回数据时,对数据进行处理,先将active字段写入,后面再通过JS修改数据时,就没问题



原创内容,转载请注明出处:网站建设,APP开发,小程序开发请找江西居道科技有限公司,http://www.juguw.net

智能建站系统代理招商
所属分类:文章中心      Time:2022-12-28 13:26:55      人气:2308
关闭
13517086454