vue js html中基于json数据动态创建Form？提供小提琴

Question

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

详细地说，我得到了 json 文件，这些文件规定了该表单中的输入类型；现在我正试图思考如何在 vue.js 中实现这一点。

例如，当我得到一个 json 数据时，需要有一个带有不同选项的选择标签，在单击特定选项时，根据表单中的 json 数据放置文本字段输入或选项。

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

给出了目前做的fiddle，有很多问题。

https://jsfiddle.net/ahnu5zz9/

我需要发送数据

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

在我第一次选择之后，有没有办法在vue.js中将输入字段划分为组件，并根据选择调用组件？

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

在第 3 种情况下 1 选择 ker，wild 和 enc 都作为下拉菜单出现。单击此按钮会出现另一个输入字段。当我点击狂野时，数量和项目来了。所以，我需要将此值发送为bok.data[0].value.qty 和bok.data[0].value.item。

另外，我需要为 wild 和 enc 提供多个选择选项。我可以使用 multiple="" 选择 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