克隆元素形式答案

【问题标题】：Clone element form克隆元素形式
【发布时间】：2019-01-28 10:51:13
【问题描述】：

我正在尝试复制表单项，但未成功

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

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

【问题讨论】：

请提供更多信息：到目前为止您尝试了什么（示例代码），您在哪里遇到错误。我什至看不到您的按钮或您要复制的字段？

标签： vue.js vuetify.js

【解决方案1】：

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

模板：

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

Vue：

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

简化示例：http://jsfiddle.net/wpako31u/

【讨论】：