Как перебирать и изменять данные в динамических формах с помощью Vuejs

Question

Когда я нажимаю на кнопку «Добавить образование», создается новая форма и данные реплицируются с предыдущего. Если я пытаюсь удалить копию, она также очищает предыдущие поля формы. Я также помещаю новые данные, введенные в список свойств данных, но первый элемент не содержит элементов данных.

Я могу справиться с этим с помощью jQuery через функцию find (), чтобы получить конкретные данные из динамических форм, но я не должен делать это в Vuejs.

<code><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 }}

экспорт по умолчанию { данные() { вернуть { EducationForm: { _Я бы: '', образование: [{ название школы: '', yearStart: '', конец года: '', квалификация заработанная: '' }] } } }, Добавьте предмет() { this.educationForm.education.push ({ schoolName: this.educationForm.education.schoolName, yearStart: this.educationForm.education.yearStart, yearEnd: this.educationForm.education.yearEnd, qualificationEarned: this.educationForm.education.qualificationEarned }); } }

Я ожидаю, что новая форма не будет копировать данные предыдущей формы при нажатии кнопки. А также введенные данные не добавляют к первым свойствам объекта в списке. Как я могу перебрать формы, чтобы очистить новые поля формы.

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/>