How to add two v-text-fields when I click a button dynamically using vuetify

Question

How can I add two v-text-fields when I click on a button, and if I need more v-text-fields I click on the button and it appears in my content. I would like something like this

I hope you get the idea.

<v-container fluid>
  <v-row align="center" >
   <v-col >
      <v-text-field color="info" v-model="new.name" label="Name" required></v-text-field>
   </v-col>
   <v-col>
     <v-select color="info" :items="arrResp"  v-model="new.idResp" label="Boss" required></v-select>
   </v-col>
 </v-row>
</v-container>

Thank you for your help.

Use v-for to loop through an array and render a text field for each object. On the button click, simply add a new object to the array and rerender — half of a glazier
– half of a glazier, Commented Mar 31, 2020 at 1:23

Shivam Singh · Accepted Answer · 2020-03-31 05:18:07Z

11

Codepen

<div id="app">
  <v-app id="inspire">

    <div
     v-for="(textField, i) in textFields"
     :key="i"
     class="text-fields-row"
    >
      <v-text-field
       :label="textField.label1"
       v-model="textField.value1"
      ></v-text-field>

      <v-text-field
       :label="textField.label2"
       v-model="textField.value2"
      ></v-text-field>

      <v-btn @click="remove(i)" class="error">delete</v-btn>
    </div>


    <v-btn @click="add" class="primary">add</v-btn>

  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      textFields: []
    }
  },

  methods: {
     add () {
        this.textFields.push({ 
          label1: "foo", 
          value1: "",
          label2: "bar",
          value2: ""
        })
     },

     remove (index) {
         this.textFields.splice(index, 1)
     }
  }
})

.text-fields-row {
  display: flex;
}

edited Mar 31, 2020 at 5:18

answered Mar 31, 2020 at 5:09

Shivam Singh

1,7411 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fábio Cardoso Over a year ago

thank you friend, After I asked the question, I had to think a little more and came up with an almost identical solution this afternoon. I was just going to comment on the solution I found, but they already have an identical one. Thank you very much for your attention !!

Collectives™ on Stack Overflow

How to add two v-text-fields when I click a button dynamically using vuetify

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related