title: How to dynamically create Input Fields in VueJS
body: <p>I'm trying to dynamically add or remove input fields on the go. </p>
  
  <p>I got a simple solution from here <a href="https://smarttutorials.net/dynamically-add-or-remove-input-textbox-using-vuejs/" rel="noreferrer">https://smarttutorials.net/dynamically-add-or-remove-input-textbox-using-vuejs/</a>, which works. However saving input values in the database stops it's functionality.</p>
  
  <p>Component Code:</p>
  
  <pre><code>&lt;div class="form-group" v-for="(input,k) in inputs" :key="k"&gt;
    &lt;input type="text" class="form-control" v-model="input.name" /&gt;
    &lt;input type="text" class="form-control" v-model="input.party" /&gt;
    &lt;span&gt;
      &lt;i
        class="fas fa-minus-circle"
        @click="remove(k)"
        v-show="k || ( !k &amp;&amp; inputs.length &gt; 1)"
      &gt;&lt;/i&gt;
      &lt;i
        class="fas fa-plus-circle"
        @click="add(k)"
        v-show="k == inputs.length-1"
      &gt;&lt;/i&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  &lt;button @click="addCandidate"&gt;
    Submit
  &lt;/button&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          inputs: [
            {
              name: "",
              party: ""
            }
          ]
        };
      },
      methods: {
        add(index) {
          this.inputs.push({ name: "", party: "" });
        },
        remove(index) {
          this.inputs.splice(index, 1);
        },
        addCandidate() {
          axios
            .post("/candidates", this.inputs)
            .then(response =&gt; {})
            .catch(error =&gt; {});
        }
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>I always get a 422 error, saying the input field is empty.</p>