使用 vuetify 动态单击按钮时如何添加两个 v-text-fields

Question

我如何在单击按钮时添加两个 v-text-fields，如果我需要更多 v-text-fields，我点击按钮，它会出现在我的内容中。我想类似这样

我希望你能明白。

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

感谢您的帮助。

Answer 1

代码笔

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