[Vuejs]-How display the form multiple times below one another by clicking a button in Vue.js

by

0👍

There are tons of ways to do it, and the representation is delivered via v-for.
Specifics depend on what you want to show in form, are there loaded values, how do you want to save them etc.

In this example i get some variable form backend (it can also just be 0, as is the default value), and add a form item object for the received amount or whenever you press the button to the array that is iterated through. If you use Vue.set or =, Vue will notice difference and rerender the component with the changed v-for loop. (it doesn’t notice, for example, push)

Then you would just submit and/or validate formValues

Alternatively you could also do something similar to v-for="number in range(0, 4)" and track the form values somehow else. Either way, world is your oyster.

<template>
  <div>
    <div v-for="(form, index) in formValues" v-key="index">
      <form>
        <input v-model="formValues[index].yourFormVariable">
        <input v-model="formValues[index].yourOtherFormVariable">
      </form>
    <div>
    <button @click="addCar()">
  </div>
</template>
<script>
...
data () {
  return {
    formValues: [],
    carAmount : 0,
  }
},
...
methods () {
  getCarAmount () {
    /*however you want to get your variable from wherever, should launch it on computed or whenever you want to reset the value*/
    this.carAmount = response.data.carAmount // carAmount being the db variable
    for(let i = 0; i < this.carAmount; i++){
      this.addCar()
    }
  },
  addCar () {
    this.formValues[this.carAmount] =
    { 
      yourFormVariable: '',
      yourOtherFormVariable: '',
    };
    this.carAmount++;
  }
},
</script>

Leave a comment