如何通过单击 Vue.js 中的按钮多次显示表单答案

【问题标题】：How display the form multiple times below one another by clicking a button in Vue.js如何通过单击 Vue.js 中的按钮多次显示表单
【发布时间】：2020-02-19 15:14:52
【问题描述】：

我想通过点击vuejs中的一个按钮多次显示一个表单，怎么可能？是否可以从数据库中读取列中的数字并显示基于该数字的表格，例如，如果我想注册车库以及该车库中的汽车数量，通过读取车库表中的汽车数量，我想要显示基于该汽车的表格数量。如果是车库里的两辆车，那么会显示两个表格，以此类推。

【问题讨论】：

看到这个codepen会帮助你。

标签： php html vue.js

【解决方案1】：

有很多方法可以做到这一点，并且表示是通过v-for 传递的。具体取决于您要在表单中显示的内容、是否有加载的值、您希望如何保存它们等。

在这个例子中，我得到了一些可变的表单后端（它也可以是 0，默认值也是如此），并为收到的金额添加一个表单项对象，或者每当您按下按钮到迭代的数组时.如果您使用 Vue.set 或 =，Vue 会注意到差异并使用更改后的 v-for 循环重新渲染组件。（它不会注意到，例如，push）

然后您只需提交和/或验证formValues

或者，您也可以执行类似于v-for="number in range(0, 4)" 的操作，并以其他方式跟踪表单值。无论哪种方式，世界都是你的牡蛎。

<template>
  <div>
    <div v-for="(form, index) in formValues" v-key="index">
      <form>
        <input v-model="formValues[index].yourFormVariable">
        <input v-model="formValues[index].yourOtherFormVariable">
      </form>
    <div>
    <button @click="addCar()">
  </div>
</template>
<script>
...
data () {
  return {
    formValues: [],
    carAmount : 0,
  }
},
...
methods () {
  getCarAmount () {
    /*however you want to get your variable from wherever, should launch it on computed or whenever you want to reset the value*/
    this.carAmount = response.data.carAmount // carAmount being the db variable
    for(let i = 0; i < this.carAmount; i++){
      this.addCar()
    }
  },
  addCar () {
    this.formValues[this.carAmount] =
    { 
      yourFormVariable: '',
      yourOtherFormVariable: '',
    };
    this.carAmount++;
  }
},
</script>

【讨论】：