I am new to vue.js. I have this 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>
And this is the method who edit data:
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");
}
},
My problem is that data are saved to weekdaySelected in row this.weekdaySelected=data.weekdays; but when I press the edit button they don’t appear in placeholder.