First Iteration of Fields
Second Iteration of Fields
Following Iterations with the same behavior
Every time I add an iteration of fields, the select field (el-select:ElementPlus) its previous selected item becomes blank.
Code:
<el-form-item>
<template v-for="(day, index) in gateForm.availableDays" :key="index">
<div style="display: flex; gap: 5px; margin-bottom: 0.5rem">
<el-select v-model="gateForm.availableDays[index].day" placeholder="Day" value-key="dayId">
<el-option
v-for="availableDay in filterAvailableDays"
:key="availableDay.dayId"
:label="availableDay.dayName"
:value="availableDay"
/>
</el-select>
<el-time-select
v-model="gateForm.availableDays[index].timeStart"
isRange
placeholder="Start Time"
/>
<el-time-select
v-model="gateForm.availableDays[index].timeEnd"
isRange
placeholder="End Time"
/>
<el-button type="primary" @click="addAvailableDays" :disabled="disablePlusButton"><i class="fa-solid fa-plus"></i></el-button>
<el-button type="danger"><i class="fa-solid fa-minus"></i></el-button>
</div>
</template>
</el-form-item>
data() {
return{
gateForm: {
gateId: "",
name: "",
status: "",
remarks: "",
siteId: "",
availableDays: [
{
day: {
dayId: null,
dayName: ""
},
timeStart: "",
timeEnd: "",
},
],
},
availableDays: [
{ dayId: 1, dayName: "Monday" },
{ dayId: 2, dayName: "Tuesday" },
{ dayId: 3, dayName: "Wednesday" },
{ dayId: 4, dayName: "Thursday" },
{ dayId: 5, dayName: "Friday" },
{ dayId: 6, dayName: "Saturday" },
{ dayId: 0, dayName: "Sunday" },
],
}
},
computed: {
filterAvailableDays() {
return this.availableDays.filter((day) => {
return!this.gateForm.availableDays.some((availableDay) => {
return availableDay.day.dayId === day.dayId;
});
});
},
isRowComplete() {
return this.gateForm.availableDays.every((day) => {
return day.day && day.timeStart && day.timeEnd;
});
},
disablePlusButton() {
return this.gateForm.availableDays.length === this.availableDays.length || !this.isRowComplete;
},
},
methods: {
async addGate() {
this.gateDialogFormVisible = true;
},
addAvailableDays() {
console.log("gateForm", this.gateForm);
this.gateForm.availableDays.push({
day: {
dayId: null,
dayName: ""
},
timeStart: "",
timeEnd: "",
});
},
},
I am expecting it to be the same as the time select wherein it still shows the previous time selected even though I added iterations of the fields.
New contributor
buzz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.