How to assign array data retrieved from state to v-model of array data object in vue.js?

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

skirtle · Accepted Answer · 2019-07-20 16:11:21Z

1

There are several mistakes:

this.record.applicant_id is an array, so you need an index on the end, before the =.
this.appliacnts should not have a this.
this.appliacnts.applicant_id[i] has the index on the wrong part. It should be before applicant_id.
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);
}

answered Jul 20, 2019 at 16:11

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tesfu Tekleab Over a year ago

Fabulous Answer! It works correctly now! Thanks to skirtle!

ittus · Accepted Answer · 2019-07-20 13:36:12Z

0

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];
      }
    }
},

edited Jul 20, 2019 at 13:36

answered Jul 20, 2019 at 12:52

ittus

22.5k5 gold badges62 silver badges59 bronze badges

3 Comments

Tesfu Tekleab Over a year ago

I have tried this too but it does not work. it responds to me Cannot read property 'applicant_id' of undefined. but the applicant id is the exact attribute name.

ittus Over a year ago

I updated the answer. Changed from this.appliacnts.applicant_id[i] to appliacnts.applicant_id[i]

Tesfu Tekleab Over a year ago

it does not work still. it have tried to log the this.getApplicants collection and it displays data. but when i try to log this.getApplicants.applicant_id it reponds to me undefined and if i add index to it can not read property of 0 undefined the first index number.

Collectives™ on Stack Overflow

How to assign array data retrieved from state to v-model of array data object in vue.js?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related