title: How to dynamically add input fields based on json data in vue js html?
body: <p>My jsfiddle is</p>
  
  <p><a href="https://jsfiddle.net/ahnu5zz9/" rel="nofollow noreferrer">https://jsfiddle.net/ahnu5zz9/</a></p>
  
  <p>My json data is</p>
  
  <pre><code>    [{
      "_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"
          }]
      }]
  }]
  </code></pre>
  
  <p>First I need to show options as</p>
  
  <pre><code>&lt;div id="add"&gt;
  &lt;div class="card-content" v-for="(bok, index) in rules" :key="index"&gt;
   &lt;select class="form-control" v-model="bok.name" name="type" &gt;
   &lt;option value="" selected disabled hidden&gt;Choose Type here&lt;/option&gt;
   &lt;option v-for="post in data" v-bind:value="post.refId" &gt;{{post.text}}&lt;/option&gt;  
  &lt;/div&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After My first selection, is there any way to divide input field into components in vue js and call components based on the selection?</p>
  
  <p>So, when I select 1st option indian act,1931, an input field comes there arms(if any). So in that case i need my v-model as bok.data[0].head.arms(if any). in next case when I select option 2. field with qty comes, so i need to send data as bok.data[0].head.qty.</p>
  
  <p>In the 3rd case 1 select ker, both wild and enc comes as dropdown. On clicking this another input field comes. When I click wild, qty and item comes. So, I need to send this values as bok.data[0].value.qty and bok.data[0].value.item.</p>
  
  <p>Also, I need to have multiple select options possible for wild and enc. I can able to select both wild and enc using multiple="".</p>
  
  <p>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. </p>