克隆元素形式

Question

我试图复制表单项失败

大家好。 我有一个表单，每次用户单击时都需要一个按钮来重复字段。 我的表格：

<v-layout v-for="(phone, index) in people.phones" :key="index" row
                                          wrap>
 <v-flex md7>
   <v-text-field v-model="phone.number" label="Phone number*" required>
 </v-text-field>
</v-flex>

<v-flex md5 class="pl-3">
 <v-select v-model="phone.type" :rules="phone.tipoRules" required
                                                  :items="['WhatsApp', 'Commercial', 'Home']" label="Phone type*">
</v-select>
 </v-flex>
</v-layout>

Answer 1

您只需要在模板中添加一个按钮并为其定义一个@click函数，该函数就会在您的people.phones数组中添加一个新项目。

模板：

<button @click="addNumber">
   add number
</button>

Vue：

methods: {
   addNumber: function(){
      this.people.phones.push({number: "", type: ""});
   }
}

简化示例：