vue 生成动态form表单并且在表单输入值后生成json字符串传给后台

毕业一年，属于偏后台但是也粗略前台的萌新。刚接触vue不久，所以这方面也比较菜。走了一些弯路，也记一点心得体会。

需求是根据页面下拉框的值加载不同的json格式的文件，把文件里面parameters（不知道有多少个元素）数组属性动态生成到form表单上，并且作为json字符串储存到数据库。

刚拿到这个需求的时候，因为自己以前也没写过类似的，所以第一时间就开始百度了（我觉得这种习惯不好，养成了对百度的依赖性，应该是先理理自己的思路，看能怎么写）。百度上面倒是有很多标题是针对于form动态表单的博客，点进去看了一下都不知所云（此话没有贬义，只是因为看了一下觉得他们的实现方式都很怪异？也和我的需求大相径庭？），就这样找博客，看博客一个多小时吧，丝毫收获都没有。开始决定自己动手了。也因为本人刚接触vue不久，其实里面很多属性都还没搞怎么明白，比如说prop，model这两个我就感觉自己都有搞混了（因为vue里面用的是element ui框架），加上中间也走了不少弯路，终于花了2个小时左右把这个需求实现了。不废话了，下面步入正题。

抽数方式选择loader，然后读取相应的json文件（注意：json文件要放到static文件夹下）

 

vue data里面form对象里我定义了个空字符串用来接收表单的json对象（也就是说，我并没有把动态生成的四个input框的值归到form对象里面，因为没必要，我最后需要的只是这些input框的值合成的json字符串而已）

好了，上面就是我动态生成的form表单了。

因为vue 数据双向绑定的值必须在data里面定义，而且对象里面的某个元素也必须先定义出来，不能定义了一个空对象，然后就凭空在template代码块里面用v-model使用啊（因为这个我走了好多弯路），所以我之后的解决办法就是先在data里面定义一个空对象

然后在读取文件之后给它添加元素（注意，这里一定要先添加元素，才能在template里面使用这个元素！！！我之前就是没有添加元素然后直接在v-model里面用了，导致一直没成功，也就是说pluginsParametersObject对象里的元素必须先定义好再使用）

好了，点击保存按钮

这个需求到此也就写完了。花了一个小时写了这个博客，记记自己的经验教训，更好成长吧~