javascript - 如何将从状态检索到的数组数据分配给vue.js中数组数据对象的v模型？

Question

我有一个使用 vuex getter 检索的来自 vuex 状态的申请人列表。从前端来看，我希望将它们各自的结果记录为数组并提交它们的结果。但我无法将申请人 id 分配给 v-model。

我尝试过使用数组和数组对象，但不起作用。 我尝试在创建页面上循环申请人列表并将其分配给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. applicnts 拼写不正确。但它是一致的，因此不会造成任何问题。

纠正我们得到的所有内容:

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);
}