Question

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

我可以通过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>

我希望当单击按钮时，新表单不会复制以前表单的数据。同样，输入的数据也不会添加到列表中的第一个对象属性中。我如何迭代表单以清除新的表单字段。

Answer 1

替换以下部分，则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/>

如何使用Vuejs以动态形式迭代和修改数据

1 个答案: