vue 动态增减表单以及动态增减表单的某一项 之优化（二）

之前写过一篇动态增减表单及表单的某一项的文章，发现页面的展示的话有点丑，而且数据处理起来比较复杂，这一篇就是在上一篇做的优化

点击继续添加的时候，不是在下面又增加个表单，而是在原有的表单上进行编辑，展现的是这样

比较之前的代码，我们把不需要的注释掉

继续添加按钮的点击事件：

 addforms() {
      let json = {
        purchaseId: this.forms.purchaseId,
        name: this.forms.name,
        type: this.forms.type,
        purchaseNumber: this.forms.purchaseNumber,
        peop: this.forms.peop,
        purchasePersons: this.forms.purchasePersons,
      };
      this.newForm.push(json);
      this.forms.purchaseId = this.forms.name = this.forms.type = this.forms.purchaseNumber =
        "";
      this.forms.purchasePersons = [];
      console.log("点击按钮添加", this.newForm);
    },

确认采购点击按钮事件：

surrPurchase（） {
	let json = {
        purchaseId: this.forms.purchaseId,
        name: this.forms.name,
        type: this.forms.type,
        purchaseNumber: this.forms.purchaseNumber,
        peop: this.forms.peop,
        purchasePersons: this.forms.purchasePersons,
      };
      this.newForm.push(json);
      this.forms.purchaseId = this.forms.name = this.forms.type = this.forms.purchaseNumber =
        "";
      this.forms.purchasePersons = [];
}

有人就好奇了，为什么一样，我可以解释一下，比如你进行到了需要确认采购的时候了，而继续添加表单事件里 this.newForm 不包括你最后的数据，所以你需要在采购的时候再进行一次push。就可以获得最终的你需要的数据了。