如何在 vue.js 中更新多选或日期等数据？

Question

我是 vue.js 新手。我写这个是为了编辑数据

<i class="mdi mdi-pencil"
                      @click.prevent="$bvModal.show(`Rel${holiday.id}`)"
                      ></i>
                      <b-modal
                      :id="`Rel${holiday.id}`"
                      ref="modal"
                      title="Update holiday"
                      centered
                      hide-footer>
                      <EditModal
                       cardTitle="Update holiday"
                       description="Update holiday"
                       :holidayObject="holiday"/>
                      </b-modal>

我在文件 edit-modal.vue 中写入模态，并为表单编写此内容：

<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="holidayComments"
                        :value="holidayObject.comments"
                        />
                    </div>
                    <div class="mb-3">
                        <label class="mt-3">Holiday type*</label>
                        <multiselect
                        required
                        id="validationCustom02"
                        v-model="holidayTypeValue"
                        :options="holidayTypesOptions"
                        placeholder="choose type"
                        selectLabel="type choised"
                        selectedLabel="choosed"
                        deselectLabel="by choice"
                        :value="holidayObject.holiday_type_name"
                        ></multiselect>
                    </div>
                    </div>
                    <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                        <div class="mb-3">
                            <label class="mt-3">From*</label>
                            <b-form-input
                            id="validationCustom03"
                            v-model="startDate"
                            type="date"
                            placeholder="DD-MM-YYYY"
                            format="DD-MM-YYYY"
                            autocomplete="off"
                            :value="holidayObject.holidays_start_date"
                            ></b-form-input>
                        </div>
                        </div>
                        <div class="col-md-12">
                        <div class="mb-3">
                            <label class="mt-3">To*</label>
                            <b-form-input
                            id="validationCustom04"
                            v-model="endDate"
                            type="date"
                            placeholder="DD-MM-YYYY"
                            format="DD-MM-YYYY"
                            autocomplete="off"
                            :value="holidayObject.holidays_end_date"
                            ></b-form-input>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">
                    Submit
                </button>
            </form>

我写了这个ins脚本

import session from "../../../../api/session";
import Multiselect from "vue-multiselect";
import { eventCreate } from "../../../../eventspy";
export default {
components: {
  Multiselect,
},
props: {
  cardTitle: String,
  description: String,
  holidayObject: {
    type: Object,
    required: true,
  }
},
data() {
  return {
    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.holidayTypes.map((e) => e.title);
  },
},
methods: {
  fetchHolidayTypes() {
    session.get("api/holidays/holiday-type-list/").then((resp) => {
      this.holidayTypes = resp.data;
    });
  },
  async UpdateFormSubmit(holidayID) {
    if (!this.holidayTypeValue) {
      alert('Input the holiday type.');
      return;
    }
    if (!this.startDate || !this.endDate) {
      alert('Input the dates');
      return;
    }
    if (this.startDate > this.endDate) {
      alert('end date should be after start date');
      return;
    }
    //   this.$refs["modal"][0].hide();
    const holidayTypesId = this.holidayTypes
      .filter((e) => e.title === this.holidayTypeValue)
      .map((item) => item.id)[0];
    console.log("holiday type id",holidayTypesId)
    await session
      .put(`api/person/holiday/${holidayID}/actions/`, {
        holidays_start_date: this.startDate,
        holidays_end_date: this.endDate,
        comments: this.holidayComments,
        person: this.$route.params.id,
        holiday_type_name: this.holidayTypeValue
      })
      .then(() => {
        this.alertShow = !this.alertShow;
        this.alertVariant = 'success';
        this.alertMsg = 'data updated';
        setTimeout(() => {
          this.$bvModal.hide(`Rel${holidayID}`);
        }, 1500);
        eventCreate(`comments: ${this.holidayObject.comments},
                   holiday_type_name: ${this.holidayObject.holiday_type_name},
                   holiday_start_date: ${this.holidayObject.holidays_start_date},
                   holiday_end_date: ${this.holidayObject.holidays_end_date},
                   ------------------------------------------
                   comments: ${this.holidayComments},
                   holiday_type_name: ${this.holidayTypeValue},
                   holiday_start_date: ${this.startDate},
                   holiday_end_date: ${this.endDate}`,2);
    })
    .catch((e) => {
      this.alertShow = !this.alertShow;
      this.alertVariant = 'danger';
      this.alertMsg = e.response.data;
    });
},
}
}

我的问题是，当我更改假期类型时，假期类型不会更改，而当我更改日期时，日期仅在刷新页面后才更改。这有什么问题吗？

Answer 1

我设法在 editModal 中使用此更新数据而无需刷新页面

setTimeout(() => {
              this.$bvModal.hide(`Rel${holidayID}`);
              this.$emit("holidayUpdated");
          }, 1500);

还有这个

holidayUpdated(holidayID){
  this.$bvModal.hide(`Rel${holidayID}`);
  this.fetchPersonHolidays();
}

但我也有多选更新的问题