时间戳

首页 > 解决方案 > 克隆元素形式

vue.js - 克隆元素形式

问题描述

我试图不成功地复制表单项

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

<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.jsvuetify.js

解决方案

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

模板：

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

视图：

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

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

推荐阅读