青苹果网站建设营销页面

需求描述：

最近项目有一个小需求是这样的，表单中的某些表单项是动态渲染的，当表单中的某一字段符合条件的时候，调用后台接口获取数据，根据后台返回的数据再为表单增加对应的 FormItem。

问题描述：

需求确实不难，但当我实际写的时候遇到一点问题，动态渲染的表单项校验规则失效了。。。
下面我们来理一下需求的实现思路，找一找问题的原因。

需求思路：

下面我们结合代码来理一下：

iview Form表单控件 model属性绑定的值，name，num是动态渲染的表单项v-model的值，为了方便后续扩展并没有直接写死，而是根据后端返回的数据去动态添加。

发送请求，获取后台数据，并添加到 表单model数据中。
问题出现了，这样直接导致了动态增加的表单校验失效了，如下图：

即使有数据，点击确定按钮，表单校验还是不通过。。。。

问题探究：

当我直接将代码改为下图这样的，是没有问题的：

将表单绑定的数据改为写死的，而不动态添加是可以的，于是对比了两种写法，发现了问题所在：


上述的两张图片中，我们可以看到直接写死的形式，name 和 num都是响应式数据；而动态添加的数据却失去了响应式，如下图所示：


这就是问题的所在，所以有了下面的解决方案。

解决方案：

使用 vue提供的$set Api为对象添加响应式的name属性和num属性。