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

Question

I have a list of applicants from vuex state retrieved using the vuex getters. and from the front end side, I wat to record their respective results as an array and submit their results. but I can't assign the applicants id to v-model.

I have tried using an array and array objects but does not work. I have tried to loop the list of applicants on the page create and assign to the array data declared in Vue data.

Template Code

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

script code

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

There are several mistakes:

1. this.record.applicant_id is an array, so you need an index on the end, before the = .
2. this.appliacnts should not have a this .
3. this.appliacnts.applicant_id[i] has the index on the wrong part. It should be before applicant_id .
4. appliacnts is not spelt correctly. It is consistent though, so it isn't causing any problems.

Correcting for all that we get:

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

It's not a particularly safe implementation though. If it gets called again and the array is shorter it'll leave the old entries in the array. I'd be more inclined to write it like this:

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

Answer 2

I think it should be 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];
      }
    }
},