vue js中根据json数据动态创建Formhtml？ fiddle提供

Question

我目前正在尝试使用 vue.js 并尝试构建一个动态创建的表单。

详细地说，我得到了 json 文件，这些文件规定了将进入该表单的输入类型；现在我正在努力思考如何在 vue.js.

中实现这一点

例如，当我得到一个 json 数据时，需要有一个带有不同选项的 select 标签，在单击特定选项时，将文本字段输入或基于 [= 的选项55=]表格中的数据。

我想这就是组件的用武之地，但我如何才能动态呈现它以及如何在我的 html 中没有大量模板的情况下包含它。 v-for ?

目前做的fiddle给出，问题比较多。

https://jsfiddle.net/ahnu5zz9/

我需要将数据发送为

rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],

在我的第一个 selection 之后，有什么方法可以将输入字段分成 vue.js 中的组件并根据 selection 调用组件？

所以，当我 select 1931 年第一个选项印第安人法案时，输入字段会出现武器（如果有的话）。所以在那种情况下，我需要我的 v-model 作为 bok.data[0].head.arms（如果有的话）。在下一种情况下，当我 select 选项 2. 带有数量的字段出现时，所以我需要将数据发送为 bok.data[0].head.qty.

在第 3 种情况下 1 select ker，wild 和 enc 都作为下拉菜单出现。单击此按钮会出现另一个输入字段。当我点击 wild 时，数量和物品就来了。因此，我需要将此值作为 bok.data[0].value.qty 和 bok.data[0].value.item.

发送

此外，我需要为 wild 和 enc 设置多个 select 选项。我可以使用 multiple="".

select wild 和 enc

我问这个是为了寻找答案。我从另一个帐户问过，但没有人帮助我。请帮助我。需要帮助。我是一名新生，请帮助我..或者请提供任何可以帮助我的人的联系方式..

Answer 1

将您的输入更改为

 <input type="text" class="form-control" v-model="bok.data[0][all3.name]">

demo 或

  <input type="text" class="form-control" v-model="bok.data[0]['value'][all3.name]">
  data   : [{head:null,value:{}}]

demo

vue js中根据json数据动态创建Formhtml？ fiddle提供

Dynamically create Form based on json data in vue js html? fiddle provided

javascript

jquery

vue.js

vue-router

vue-component