Vue中v-for遍历多层嵌套数据,不能重新渲染的问题

问题
{ "properties": [ [ { "name": "property_name", "example": "travel_time", "value": "" }, { "name": "property_value", "example": "20180831", "value": "" }, { "name": "property_name1_1", "example": "example of property_name1_1", "value": "" }, { "name": "property_name1_2", "example": "example of property_name1_2", "value": "" }, { "property_name2": [ [ { "name": "property_name2_1", "example": "example of property_name2_1", "value": "" }, { "name": "property_name2_2", "example": "example of property_name2_2", "value": "" } ] ] }, { "name": "property_name2_1_1", "example": "example of property_name2_1_1", "value": "" }, { "name": "property_name2_1_2", "example": "example of property_name2_1_2", "value": "" }, { "name": "property_name32_2", "example": "example of property_name2_2", "value": "" } ] ], "property_name2222": [ [ { "name": "property_name12_1", "example": "example1", "value": "" }, { "name": "property_name12_2", "example": "example2", "value": "" } ] ] }

最近在出了一个动态参数的问题,需要把后台得json处理成一组嵌套的表单数据,并显示动态表单,进过一番(好久好久)头皮发麻的处理,终于处理成可用也是所需要的数据。
但是在生成动态表单时,当然是通过v-for指令来生成的,这是问题的前提。但是当我点击按钮给数组新增一个表单项时,界面并未更新,懵比,也没遇到过啊,以前都有用的,咋现在熄火了呢。头疼,各种折磨,弄了将近一天。

最后在这里找到答案,原因是我这里是对象嵌套了数组,数组嵌套了对象,且是多层的,因此Vue无法检测到内部的更新或增删。

如何解决

在完成对数据的更新后,强制Vue更新数据

this.$forceUpdate();

这样就可以了!!!
此外,出现Vue不能检测到数据更新的场景还有Vue无法检测对象属性的添加或删除,详细请看这里

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值