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

时间:2018-05-29 11:37:58

标签: javascript jquery vue.js vue-component vue-router

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

详细地说,我得到了json文件,它们决定了该表单中的输入类型是什么;现在,我试图围绕着如何在 vue.js 中意识到这一点。

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

我猜那些组件会出现在哪里,但我怎样才能动态渲染它,如何在我的 html中没有大量模板的情况下包含它。 v-for

目前已经完成了小提琴,这有很多问题。

https://jsfiddle.net/ahnu5zz9/

我需要发送数据

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

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

所以,当我选择1931年的第一选项印度法案时,输入字段就会出现武器(如果有的话)。所以在这种情况下我需要我的v模型为bok.data[0].head.arms(如果有的话)。在下一种情况下,当我选择选项2.带有数量的字段时,我需要将数据作为bok.data[0].head.qty发送。

在第3种情况下,1选择ker,wild和enc都是下拉列表。点击此另一个输入字段。当我点击wild,qty和item来的时候。因此,我需要将此值发送为bok.data[0].value.qtybok.data[0].value.item

另外,我需要为wild和enc提供多个选择选项。我可以使用multiple=""选择wild和enc。

我在寻找答案时要求这样做。我从另一个帐户询问过,但没有人帮助过我..请帮助我..需要帮助。我是一个新鲜的请帮助我...或者请给任何可以帮助我的人联系..

1 个答案:

答案 0 :(得分: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