<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写了一个项目。我有上面的表格。我的问题是,当我进行更新时,除假期类型之外的所有字段都会更新,我在这方面犯了什么错误?我尝试更改假期类型并对其进行调试,尽管我输入的新假期类型已打印到控制台,但假期类型并未更改。
<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>