如何在vue.js中將從狀態檢索的數組數據分配給數組數據對象的v模型？

Question

我有一個使用vuex getters從vuex狀態檢索的申請人列表。 從前端開始，我想將它們各自的結果記錄為數組並提交結果。 但我無法將申請人ID分配給v模型。

我試過使用數組和數組對象，但是不起作用。 我試圖在頁面上循環創建申請人列表，並將其分配給Vue數據中聲明的數組數據。

模板代碼

<template>
<table style="margin-left:10%;">
          <tr>
            <th>#</th>
            <th>Full Name</th>
            <th>Result</th>
          </tr>
          <tr
            v-for="(applicant, key) in getApplicants"
            :key="applicant.applicant_id"
          >
            <td>{{ key + 1 }}</td>
            <td>
              {{ applicant.first_name }} {{ applicant.middle_name }}
              {{ applicant.last_name }}
              <b-form-input v-model="record.applicant_id[key]"></b-form-input>
            </td>
            <td>
              <b-form-input v-model="record.exam_result[key]"></b-form-input>
            </td>
          </tr>
        </table>
<template>

腳本代碼

data() {
    return {
      update: false,
      record: {
        job_vacancy_id: null,
        exam_type_id: null,
        applicant_id: [],
        exam_result: []
      }
    };

methods:{
 save() {
      var object = {
        job_vacancy_id: this.record.job_vacancy_id,
        manpower_requisition_id: this.manpower_requisition_id,
        applicants_id: this.applicants_id,
        exam_result: this.record.exam_result
      };
      console.log(object);
    },
populate() {
      let appliacnts = this.getApplicants;
      for (var i = 0; i <= appliacnts.length; i++) {
        this.record.applicant_id = this.appliacnts.applicant_id[i];
      }
    }
},

created() {
    this.populate();
  }

Answer 1

有幾個錯誤：

1. this.record.applicant_id是一個數組，因此您需要在=之前結尾處有一個索引。
2. this.appliacnts不應具有this 。
3. this.appliacnts.applicant_id[i]的索引在錯誤的部分。 它應該在applicant_id之前。
4. appliacnts拼寫不正確。 但是，它是一致的，因此不會引起任何問題。

更正我們得到的一切：

populate() {
  const applicants = this.getApplicants;
  for (var i = 0; i <= applicants.length; i++) {
    this.record.applicant_id[i] = applicants[i].applicant_id;
  }
}

但是，這並不是一個特別安全的實現。 如果再次調用它並且數組更短，它將把舊條目保留在數組中。 我更傾向於這樣寫：

populate() {
  const applicants = this.getApplicants;
  this.record.applicant_id = applicants.map(applicant => applicant.applicant_id);
}

Answer 2

我認為應該是this.record.applicant_id[i] = appliacnts.applicant_id[i]

populate() {
      let appliacnts = this.getApplicants;
      for (var i = 0; i <= appliacnts.length; i++) {
        this.record.applicant_id[i] = appliacnts.applicant_id[i];
      }
    }
},