How to dynamically add two v-text-fields to a form when a button is clicked and uniquely identify them

21 Views Asked by At

I've seen some posts about how to dynamically add test fields to a form when a button is clicked. like in this post How to add two v-text-fields when I click a button dynamically using vuetify Im not understanding where I would put the v-for in this scenario.

But, how can I achieve this using nuxt2 and vue2. I use a vuex store for the input data, but how can I identify the new text fields being added so I can update the store accordingly?

Ideally I'd have a v-row with 2 v-cols and when I click the button, another row appears with the 2 v-cols, but Im not understanding where I would put the v-for in this scenario. Small snippet based on the above linked question.

<template>
 <v-card>
  <v-card-text>
   <v-row>
    <v-col>
     <v-text-field
       :label="textField.label1"
       v-model="textField.value1"
      ></v-text-field> Im not understanding where I would put the v-for in this scenario.
      <v-text-field
       :label="textField.label2"
       v-model="textField.value2"
      ></v-text-field>
     </v-col>
     <v-col>
      <v-btn @click="addRow">Add Row</v-btn>
     </v-col>
    </v-row>
   </v-card-text>
  </v-card>
</template>
0

There are 0 best solutions below