Cannot duplicate my form with v-for vuejs help needed

Question

I am having a form where user can put in the input the message he wants to deliver and the sec which stands for how many sec do you want to show it(timeout), I made an add button which should put in the screen another one form where he can add something different text and sec ...

I put v-for to my form .My code looks like this:

<v-form ref="form" class="container" v-for="(input,i) in inputs" :key="i" lazy-validation>
  <v-container class="container">
    <v-layout>
      <v-flex lg12 class="container">
        <v-text-field v-model="inputs.text" label="Text" placeholder="" required></v-text-field>
      </v-flex>

      <v-flex lg3 class="container">
        <v-text-field v-model="inputs.sec" label="Millisec" required type="number"></v-text-field>
      </v-flex>

      <v-flex lg12 class="container">
        <v-btn color="black" @click="addLines(i)" v-show="i == inputs.length-1">ADD</v-btn>
      </v-flex>
      <v-flex lg6 class="container">
        <v-btn color="dark" @click="onSubmit">Submit</v-btn>
      </v-flex>
    </v-layout>
  </v-container>
</v-form>

data what i am having:

data() {
    return {
      inputs: [
        {
          text: "",
          sec: 0
        }
      ]

i decleared that addLines(i) method but but im not sure how should i duplicate the form thats when i need your help, i need the form to not be the same form so if i write to one form do not show it in the duplicate one.

addLines(i) {
      this.inputs.push({ text: "", sec: 0 });
    },

when i run this the program says

75:14  error  'i' is defined but never used  no-unused-vars

button is not showing as well:(

Answer 1

This is es-lint error. To solve change this line like this (remove the unused i)

addLines() {
  this.inputs.push({ text: "", sec: 0 });
}

and change your template to:

<v-form
  ref="form"
  class="container"
  v-for="(input,i) in inputs"
  :key="i"
  lazy-validation
>
  <v-container class="container">
    <v-layout>
      <v-flex lg12 class="container">
        <v-text-field
          v-model="input.text"
          label="Text"
          placeholder=""
          required
        ></v-text-field>
      </v-flex>

      <v-flex lg3 class="container">
        <v-text-field
          v-model="input.sec"
          label="Millisec"
          required
          type="number"
        ></v-text-field>
      </v-flex>

      <v-flex lg12 class="container">
        <v-btn color="black" @click="addLines(i)" v-show="i == inputs.length-1"
          >ADD</v-btn
        >
      </v-flex>
      <v-flex lg6 class="container">
        <v-btn color="dark" @click="onSubmit">Submit</v-btn>
      </v-flex>
    </v-layout>
  </v-container>
</v-form>