How to dynamically add input fields based on json data in vue js HTML?

See more:

Javascript

vue.js

My json data is

[ { "_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" } ] } ] } ]

First I need to show options as

<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>

So, if I type option 1(refId:7929), i need to show input fields

name : arms(if any) with type="text".

I need to display as following input field if I select refId:7929. I need to dynamically form the following field based on the the json data above.






If I select option 3:refId:7933 i should should a option having both wild and enc. If I select option wild, I should show input fields both qty and item. If I select option enc, then I must show an input field having name qty.

My vue js code is

app = new Vue({
el: "#app",
data: {
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
data:[],
},
mounted: function() {
var vm = this;
$.ajax({
url: "http://localhost:4000/get/acts",
method: "GET",
dataType: "JSON",
success: function(e) {
if (e.status == 1) {
vm.data = e.data; //json data
};
},
});

},
handleSubmit: function(e) {

--ajax request--
}
}
})

;

How can I able to achieve the above result? I looked in several tutorials but none providing an answer. I am a beginner in coding and don't have much idea. If, anybody could please help me to have a solution.

Thanks in advance. Please don't downvote. Humble request for an answer

What I have tried:

<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>