Как добавить два v-text-поля, когда я динамически нажимаю кнопку с помощью vuetify - PullRequest
Новая
       28

Как добавить два v-text-поля, когда я динамически нажимаю кнопку с помощью vuetify

1 голос
/ 31 марта 2020

Как я могу добавить два v-текстовых поля, когда я нажимаю на кнопку, и если мне нужно больше v-текстовых полей, я нажимаю на кнопку, и она появляется в моем контенте. Я хотел бы что-то вроде this

Я надеюсь, вы поняли идею. 

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

Спасибо за вашу помощь.

1 Ответ

2 голосов
/ 31 марта 2020

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