Javascript 如何使用Vuejs迭代和修改动态表单中的数据

单击“添加教育”按钮时，将创建一个新表单，并从上一个表单复制数据。如果我尝试删除复制，它也会清除前面的表单字段。我还将输入的新数据推送到数据属性列表中，但第一项没有数据项

我可以通过find（）函数使用jQuery来处理这个问题，以便从动态表单中获取特定数据，但我不会在Vuejs中这样做

<template>
      <div>
    <form v-if="show">

   <button type="button" variant="success"  @click="addItem">Add Education</button>

  <card class="card-body" style="margin-top: 1rem;" v-for="item in educationForm.education" v-bind:key="item.id">
    <card-title>Educational Qualification</card-title>

    <div class="flex-row">
       <mdb-input label="School Name" v-model="educationForm.education.schoolName" size="lg" required/> 
      <mdb-input label="Year Started" v-model="educationForm.education.yearStart" size="lg" required/> 
      <mdb-input label="Year Ended" v-model="educationForm.education.yearEnd" size="lg" required/> 
      <mdb-input label="Qualification Earned" v-model="educationForm.education.qualificationEarned" size="lg" required/> 
    </div>
  </card>

      <button type="button" variant="primary" @click="saveEducation">Submit</button>
    </form>

     <card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ educationForm }}</pre>
    </card>



  </div>

</template>
<script>
export default {
     data() {

      return {
        educationForm: {
          _id: '',
          education: [{
          schoolName: '',
          yearStart: '',
          yearEnd: '',
          qualificationEarned: ''
          }]

        }
      }
     },
    addItem() {
        this.educationForm.education.push({
          schoolName: this.educationForm.education.schoolName,
          yearStart: this.educationForm.education.yearStart,
          yearEnd: this.educationForm.education.yearEnd,
          qualificationEarned: this.educationForm.education.qualificationEarned
        });
      }
}
</script>

增加教育
学历
提交
{{educationForm}
导出默认值{
数据（）{
返回{
教育形式：{
_id:“”，
教育：[{
学名：''，
年头：''，
年底：''，
资格警告：“”
}]
}
}
},
附加项（）{
这个。教育形式。教育。推动({
学名：this.educationForm.education.schoolName，
yearStart:this.educationForm.education.yearStart，
年终：这个。教育表格。教育。年终，
资格学习：this.educationForm.education.qualificationarned
});
}
}

我希望在单击按钮时，新表单不会复制以前表单的数据。而且，输入的数据不会添加到列表中的第一个对象属性中。

---

如何迭代表单以清除新表单字段。

替换以下部分，v-model属性错误：

 <mdb-input label="School Name" v-model="item.schoolName" size="lg" required/> 
      <mdb-input label="Year Started" v-model="item.yearStart" size="lg" required/> 
      <mdb-input label="Year Ended" v-model="item.yearEnd" size="lg" required/> 
      <mdb-input label="Qualification Earned" v-model="item.qualificationEarned" size="lg" required/>

---

更换以下零件，v-model属性错误：

 <mdb-input label="School Name" v-model="item.schoolName" size="lg" required/> 
      <mdb-input label="Year Started" v-model="item.yearStart" size="lg" required/> 
      <mdb-input label="Year Ended" v-model="item.yearEnd" size="lg" required/> 
      <mdb-input label="Qualification Earned" v-model="item.qualificationEarned" size="lg" required/>

尝试使用v-model=“item.schoolName”而不是v-model=“educationForm.education.schoolName”尝试使用v-model=“item.schoolName”而不是v-model=“educationForm.education.schoolName”