I'm trying to dynamically add or remove input fields on the go.

I got a simple solution from here https://smarttutorials.net/dynamically-add-or-remove-input-textbox-using-vuejs/, which works. However saving input values in the database stops it's functionality.

Component Code:

<div class=form-group v-for=(input,k) in inputs :key=k>

  <input type=text class=form-control v-model=input.name />

  <input type=text class=form-control v-model=input.party />

  <span>

    <i

      class=fas fa-minus-circle

      @click=remove(k)

      v-show=k || ( !k && inputs.length > 1)

    ></i>

    <i

      class=fas fa-plus-circle

      @click=add(k)

      v-show=k == inputs.length-1

    ></i>

  </span>

</div>

<button @click=addCandidate>

  Submit

</button>



<script>

  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 => {})

          .catch(error => {});

      }

    }

  };

</script>

I always get a 422 error, saying the input field is empty.