时间戳

首页 > 解决方案 > 单击Vue js中的按钮后，我应该如何在表单中复制部分内容

vue.js - 单击Vue js中的按钮后，我应该如何在表单中复制部分内容

问题描述

我现在正在使用 Vue js，我正在尝试在模板中复制一些代码。因为我不知道它需要多少表格，所以它必须是灵活的。

我的模板代码

<form @submit="duplicated">
  <b-form-input id="name" v-model="name" type="text" required/>
  ... other codes needs to copy

  <b-button type="submit">Save</b-button> 
  <!-- after clicking the button, the website should show two forms -->
</form>

标签： vue.js

解决方案

您可以将变量存储在数据中并在表单中使用 v-for。

<form v-for="(form,index) in numberofForms" :key="index"
   @submit.prevent = "numberofForms++" >
  <b-form-input id="name" v-model="name" type="text" required/>
  ... other codes needs to copy

  <b-button type="submit">Save</b-button> 
</form>

export default {
...
data() {
 return {
  numberofForms: 1,
  }
 },
};

推荐阅读