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

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

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

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

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

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

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

所以说我们不能直接用

这种形式 去 动态添加数据

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

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

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

完美~