Vue2：编辑模态框中multiselect星期选中数据无法回显怎么办？

我是VueJS新手，现有如下b-modal模态框代码：

<b-modal
  :id="`Rel${object.id}`"
  ref="editModal"
  title="Update data"
  centered
  hide-footer
  :myobject="object"
>
  <form class="needs-validation" @submit.prevent="handleEdit(object)">
    <div class="col-md-8">
      <label class="mt-3">Days</label>
      {{ weekdaySelected }}
      <multiselect
        required
        v-model="weekdaySelected"
        :options="weekdayOptions"
        track-by="id"
        label="weekday"
        multiple
        placeholder="Choose day"
        selectLabel="Choose day"
        selectedLabel="Chose"
      >
      </multiselect>
    </div>
  </form>
</b-modal>

对应的编辑数据方法handleEdit的JavaScript代码：

handleEdit(row) {
  if (this.timesAreValid(row.start_time, row.end_time, row.is_night_shift)) {
    const data = { ...row };
    console.log("My data: ", data);
    console.log("My weekdays before update: ", data.weekdays);
    // data.weekdays=this.weekdaySelected.map(day=>day.id);
    this.weekdaySelected = data.weekdays;
    console.log("My weekdays: ", data.weekdays);
    console.log("Initial selected weekdays: ", this.weekdaySelected);
    // delete data.weekdays;
    this.weekdaySelected = row.weekdays;
    console.log("Selected weekdays: ", this.weekdaySelected);
    data.weekdays = row.weekdays.map((e) => {
      return { id: e, weekday: e - 1 };
    });
    console.log("My new weekdays: ", data.weekdays);
    session
      .put(`api/user/schedule/${row.id}/update/`, data)
      .then((resp) => {
        console.log(resp.data);
        this.$toastr.Add({
          name: "UniqueToastName",
          title: `Update`,
          msg: "Schedule updated",
          style: { backgroundColor: "#4fd69c", width: "550px" },
          progressbar: false,
          timeout: 3501,
        });

        console.log("Row: ", row);
        setTimeout(() => {
          this.$bvModal.hide(`Rel${row.id}`);
        }, 1000);
      })
      .catch((e) => {
        this.$toastr.e(`Error : ${JSON.stringify(e)}  `);
      });
  } else {
    this.$toastr.e("End hour should be after start hour");
  }
}

我的问题是：在代码this.weekdaySelected=data.weekdays;处已将row中的星期数据赋值给weekdaySelected，但点击编辑按钮时，该数据无法显示在multiselect的占位区域中。请问如何修改才能让选中的星期数据正常显示？

问题核心是数据格式不匹配：你从row.weekdays拿到的是数字数组（比如[1,3]），但multiselect的v-model需要和weekdayOptions的结构一致（即包含id和weekday的对象数组），同时你之前的赋值时机错误（handleEdit是提交表单时触发，打开模态框时并未执行）。

1. 调整赋值时机，在打开模态框时加载正确格式的选中项 #

新增打开模态框的方法（替换你当前点击编辑按钮触发的逻辑）：

openEditModal(row) {
  // 从weekdayOptions中筛选出和row.weekdays匹配的对象
  this.weekdaySelected = this.weekdayOptions.filter(option => row.weekdays.includes(option.id));
  // 打开模态框
  this.$bvModal.show(`Rel${row.id}`);
}

2. 修正handleEdit中的数据处理逻辑 #

提交表单时，将选中的对象数组转回后端需要的数字数组：

handleEdit(row) {
  if (this.timesAreValid(row.start_time, row.end_time, row.is_night_shift)) {
    const data = { ...row };
    // 把选中的对象数组转换为id数字数组
    data.weekdays = this.weekdaySelected.map(day => day.id);
    
    session.put(`api/user/schedule/${row.id}/update/`, data)
      .then((resp) => {
        this.$toastr.Add({
          name: "UniqueToastName",
          title: `Update`,
          msg: "Schedule updated",
          style: { backgroundColor: "#4fd69c", width: "550px" },
          progressbar: false,
          timeout: 3501,
        });
        setTimeout(() => {
          this.$bvModal.hide(`Rel${row.id}`);
        }, 1000);
      })
      .catch((e) => {
        this.$toastr.e(`Error : ${JSON.stringify(e)}  `);
      });
  } else {
    this.$toastr.e("End hour should be after start hour");
  }
}

3. 确保weekdayOptions的结构正确 #

确认你的weekdayOptions是包含id和weekday字段的对象数组，示例如下：

weekdayOptions: [
  { id: 1, weekday: "周一" },
  { id: 2, weekday: "周二" },
  { id: 3, weekday: "周三" },
  { id: 4, weekday: "周四" },
  { id: 5, weekday: "周五" },
  { id: 6, weekday: "周六" },
  { id: 7, weekday: "周日" },
]

这样修改后，打开模态框时multiselect就能正确识别并显示已选中的星期数据了。

内容的提问来源于stack exchange，提问作者Mike