Question

我的jsfiddle是

我的json数据是

    [{
    "_id": "5b052126c3a5552bac060fab",
    "refId": 7929,
    "type": "text",
    "text": "Indian Act 1931",
    "__v": 0,
    "feilds": [{
        "refId": 7912,
        "name": "arms(if any)",
        "_id": "5b052126c3a5552bac060fac",
        "sections": [],
        "subFeilds": []
    }]
}, {
    "_id": "5b05244f90a7000f44bcbbb6",
    "refId": 7930,
    "type": "text",
    "text": "Narcotic",
    "__v": 0,
    "feilds": [{
        "refId": 7913,
        "name": "qty",
        "_id": "5b05244f90a7000f44bcbbb7",
        "sections": [],
        "subFeilds": []
    }]
}, {
    "_id": "5b052b4090a7000f44bcbbbf",
    "refId": 7933,
    "type": "option",
    "text": "Ker",
    "__v": 0,
    "feilds": [{
        "refId": 7918,
        "name": "wild",
        "_id": "5b052b4090a7000f44bcbbc2",
        "sections": ["sec1", "sec2"],
        "subFeilds": [{
            "refId": 17890,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc4"
        }, {
            "refId": 7891,
            "name": "item",
            "_id": "5b052b4090a7000f44bcbbc3"
        }]
    }, {
        "refId": 7919,
        "name": "enc",
        "_id": "5b052b4090a7000f44bcbbc0",
        "sections": ["sec2"],
        "subFeilds": [{
            "refId": 7892,
            "name": "qty",
            "_id": "5b052b4090a7000f44bcbbc1"
        }]
    }]
}]

首先，我需要将选项显示为

<div id="add">
<div class="card-content" v-for="(bok, index) in rules" :key="index">
 <select class="form-control" v-model="bok.name" name="type" >
 <option value="" selected disabled hidden>Choose Type here</option>
 <option v-for="post in data" v-bind:value="post.refId" >{{post.text}}</option>  
</div>
</select>
</div>
</div>

在我第一次选择之后，有没有办法将输入字段划分为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.qty和bok.data [0] .value.item。

另外，我需要为wild和enc提供多个选择选项。我可以使用多个=＆＃34;＆＃34;选择wild和enc。

我怎样才能达到上述效果？我查看了几个教程但没有提供答案。我是编码的初学者，并没有太多的想法。

如何在vue js html中基于json数据动态添加输入字段？

0 个答案: