Home » Javascript » How to dynamically add input fields based on json data in vue js html?

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

Posted by: admin August 19, 2018 Leave a comment

Questions:

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.

<div class="col-md-4">
 <label class="control-label">Arms(if any)</label>
 <input type="text" class="form-control" v-model="bok.data[0].head.arms" >
 </div>
 </div>

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

Answers: