单击Vue js中的按钮后，如何在表单中复制部分内容

Question

我现在正在使用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>

Answer 1

您可以在数据中存储变量，并在表单中使用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,
  }
 },
};