如何更新 vue.js 中的多选？

Question

<form class = "needs-validation" @submit.prevent = "UpdateFormSubmit(holidayObject.id)">
                    <div class = "row">
                        <div class = "col-md-6">
                        <div class = "mb-3">
                            <label for = "validationCustom01">Comments</label>
                            <b-form-input
      
                      id = "validationCustom01"
                            type = "text"
                            class = "form-control"
                            placeholder = "Comments"
                            v-model = "holiday.holidayComments"
                            />
                        </div>
                        <div class = "mb-3">
                            <label class = "mt-3">Holiday type*</label>
                            <multiselect
                            required
                            id = "validationCustom02"
                            v-model = "holiday.holidayTypeValue"
                            :options = "holidayTypesOptions"
                            placeholder = "select type"
                            selectLabel = "select type"
                            selectedLabel = "selected"
                            deselectLabel = "selected"
                            ></multiselect>
                        </div>
                        </div>
                        <div class = "col-md-12">
                        <div class = "row">
                            <div class = "col-md-12">
                            <div class = "mb-3">
                                <label class="mt-3">Start date*</label>
                                <b-form-input
                                id = "validationCustom03"
                                v-model = "holiday.startDate"
                                type = "date"
                                placeholder = "DD-MM-YYYY"
                                format = "DD-MM-YYYY"
                                autocomplete = "off"
                                ></b-form-input>
                            </div>
                            </div>
                            <div class = "col-md-12">
                            <div class = "mb-3">
                                <label class = "mt-3">End date*</label>
                                <b-form-input
                                id = "validationCustom04"
                                v-model = "holiday.endDate"
                                type = "date"
                                placeholder = "DD-MM-YYYY"
                                format = "DD-MM-YYYY"
                                autocomplete = "off"
                                ></b-form-input>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <button class = "btn btn-primary" type="submit">
                        submit
                    </button>
                </form>

我用vue.js写了一个项目。我有上面的表格。我的问题是，当我进行更新时，除假期类型之外的所有字段都会更新，我在这方面犯了什么错误？我尝试更改假期类型并对其进行调试，尽管我输入的新假期类型已打印到控制台，但假期类型并未更改。

Answer 1

<script>
import session from "../../../../api/session";
import Multiselect from "vue-multiselect";
export default {
    components: {
      Multiselect,
    },
props: {
cardTitle: String,
description: String,
holidayObject: {
  type: Object,
  required: true,
}
},
data() {
  return {
    holiday: {
      startDate: this.holidayObject.holidays_start_date,
      endDate: this.holidayObject.holidays_end_date,
      holidayTypes: [],
      holidayTypeValue: this.holidayObject.holiday_type_name,
      holidayComments: this.holidayObject.comments,
    },
    alertShow: false,
    alertVariant: "",
    alertMsg: ""
  };
},
mounted() {
  this.fetchHolidayTypes();
},
computed: {
  holidayTypesOptions() {
    return this.holiday.holidayTypes.map((e) => e.title);
  },
},
methods: {
  fetchHolidayTypes() {
  session.get("api/holidays/holiday-type-list/").then((resp) => {
    this.holiday.holidayTypes = resp.data;
  });
},
UpdateFormSubmit(holidayID) {
  console.log("eimai sto edit");
  if (!this.holiday.holidayTypeValue) {
      alert('Παρακαλώ επιλέξτε έναν τύπο άδειας.');
      return;
  }
  if (!this.holiday.startDate || !this.holiday.endDate) {
      alert('Παρακαλώ συμπληρώστε ημερομηνίες');
      return;
  }
  if (this.holiday.startDate > this.holiday.endDate) {
      alert('Η ημερομηνία λήξης πρέπει να είναι μετά την ημερομηνία έναρξης');
      return;
  }

  const holidayTypesId = this.holiday.holidayTypes
      .filter((e) => e.title === this.holiday.holidayTypeValue)
      .map((item) => item.id)[0];
  console.log("holiday type id",holidayTypesId);
  console.log("holiday value",this.holiday.holidayTypeValue);
  console.log("start date",this.holiday.startDate);
  session
      .put(`api/person/holiday/${holidayID}/actions/`, {
          holidays_start_date: this.holiday.startDate,
          holidays_end_date: this.holiday.endDate,
          comments: this.holiday.holidayComments,
          person: this.$route.params.id,
          holiday_type_name: this.holiday.holidayTypeValue
      })
      .then(() => {
          console.log("holiday value then",this.holiday.holidayTypeValue);
          console.log("start date",this.holiday.startDate);
          this.alertShow = !this.alertShow;
          this.alertVariant = "success";
          this.alertMsg = 'Τα δεδομένα ενημερώθηκαν επιτυχώς';
          setTimeout(() => {
              this.$bvModal.hide(`Rel${holidayID}`);
              this.$emit("holidayUpdated");
          }, 1500);
      })
      .catch((e) => {
          this.alertShow = !this.alertShow;
          this.alertVariant = "danger";
          this.alertMsg = e.response.data;
      });
},
}
}
</script>