红色系列的网站,旅游网站开发技术文档,浙江常规网站建设,网站建设的价值是什么意思需求描述#xff1a;
最近项目有一个小需求是这样的#xff0c;表单中的某些表单项是动态渲染的#xff0c;当表单中的某一字段符合条件的时候#xff0c;调用后台接口获取数据#xff0c;根据后台返回的数据再为表单增加对应的 FormItem。
问题描述#xff1a;
需求确…需求描述
最近项目有一个小需求是这样的表单中的某些表单项是动态渲染的当表单中的某一字段符合条件的时候调用后台接口获取数据根据后台返回的数据再为表单增加对应的 FormItem。
问题描述
需求确实不难但当我实际写的时候遇到一点问题动态渲染的表单项校验规则失效了。。。 下面我们来理一下需求的实现思路找一找问题的原因。
需求思路
下面我们结合代码来理一下 iview Form表单控件 model属性绑定的值namenum是动态渲染的表单项v-model的值为了方便后续扩展并没有直接写死而是根据后端返回的数据去动态添加。 发送请求获取后台数据并添加到 表单model数据中。 问题出现了这样直接导致了动态增加的表单校验失效了如下图 即使有数据点击确定按钮表单校验还是不通过。。。。
问题探究
当我直接将代码改为下图这样的是没有问题的 将表单绑定的数据改为写死的而不动态添加是可以的于是对比了两种写法发现了问题所在 上述的两张图片中我们可以看到直接写死的形式name 和 num都是响应式数据而动态添加的数据却失去了响应式如下图所示 这就是问题的所在所以有了下面的解决方案。
解决方案 使用 vue提供的$set Api为对象添加响应式的name属性和num属性。
