Click here to Skip to main content
15,849,996 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.




Arms(if any)




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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900