CODEWITHSUNDEEP
javascriptformsvue.jsbuttonvuetify.js
Fábio Cardoso
Fábio Cardoso

Reputation: 33

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

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.

Upvotes: 3

Views: 5196

Answers (1)

Shivam Singh
Shivam Singh

Reputation: 1731

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;
}

Upvotes: 11

Related Questions