美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、哥金党、专门写Bug~


Vue 动态添加数据,绑定失效

OK,
今天遇到个很奇怪的问题。
先简单描述下场景:

我通过遍历一个 数组 来创建 表单 数组里面 没一项都是一个 Object 一个 object 就是一个 表单
我现在 动态 为这个 数组 添加 Object
但是 动态添加的这个 Object 在 页面上 能渲染出来 但是数据 绑定 不起作用 任何操作都无效
放个图
我是通过这个按钮控制来 添加数据的

当切换为的时候 增加如下 表单

然后 在 新增的表单中,任何操作均无效。。。

于是我打印了 新增的 表单数据
通过 控制台 我们看到
一个受控制的 数据 是 分别有 getset

然而 在我动态添加的这个数据中并不含有 getset
图片

所以说我们不能直接用
图片
这种形式 去 动态添加数据

仔细查阅了下 Vue的 API 发现了 一个 $set的方法
图片

于是改造一下 这个 动态添加的 代码
图片

再回到我们的网站上去测试一下。。。

完美~

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

【程序员漫画】《10101》第12.5话

贿赂大使馆的100种姿势…

程序员漫画 继续阅读
更早的文章

html2canvas 不高清?模糊?

自从有了Canvas之后 前端能做的事情越来越多了,比如 * 上传预览 以前我们上传预览的时候都必须先把图片上传发送给后台,然后后台再返回给我们一个图片url 我们再展示在前台,更…

html2canvas 继续阅读
comments powered by Disqus
沪ICP备15043964号-3