Question

我有一个使用vuex获取器从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

有几个错误：

this.record.applicant_id是一个数组，因此您需要在=之前的最后一个索引。
this.appliacnts不应包含this。
this.appliacnts.applicant_id[i]的索引在错误的部分。应该在applicant_id之前。
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];
      }
    }
},

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

2 个答案: