Using PrimeVue Form, and am running into issues with v-model:
<Form v-slot="$form" :initialValues :resolver @submit="saveShift">
<div>{{ console.log('Slot scope:', { $form }) }}</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-4 w-full items-center flex"><label for="shiftname" class="font-semibold">Shift
Name</label></div>
<div class="col-span-8 w-full">
<div>
<InputText name="shiftname" class="w-full" autocomplete="off" :disabled="formBeingSubmitted"
placeholder="Name of the new shift"/>
</div>
</div>
<div v-for="day in days" :key="day" class="grid grid-cols-12 col-span-12 gap-4 w-full">
<div class="col-span-4 w-full items-center flex"><label class="font-semibold">{{ day }}</label>
</div>
<div class="col-span-4 w-full">
<DatePicker :id="`datepicker-${day.slice(0,3)}-start`" :name="`time${day.slice(0,3)}Start`" show-icon iconDisplay="input" showTime
hourFormat="12" step-minute="5" time-only
fluid placeholder="Start time"
v-model="$form.values[`time${day.slice(0,3)}Start`]">
<template #inputicon="slotProps">
<i class="pi pi-times" @click="clearTime(`time${day.slice(0,3)}End`)"/>
</template>
</DatePicker>
</div>
<div class="col-span-4 w-full">
<DatePicker :id="`datepicker-${day}-end`" :name="`time${day.slice(0,3)}End`" show-icon iconDisplay="input" showTime
hourFormat="12" step-minute="5"
time-only
fluid placeholder="End time">
v-model="$form.values[`time${day.slice(0,3)}End`]"
<template #inputicon="slotProps">
<i class="pi pi-times" @click="clearTime(`time${day.slice(0,3)}End`)"/>
</template>
</DatePicker>
</div>
</div>
</div>
<div class="flex gap-2 justify-end mt-8">
<Button type="button" label="Cancel" text severity="secondary" @click="showAddNewModal = false"></Button>
<Button type="submit" label="Save" :loading="formBeingSubmitted"></Button>
</div>
<div>{{ $form }}</div>
</Form>
My initialValues:
const initialValues = ref({
shiftname: '',
timeMonStart: '',
timeMonEnd: '',
timeTueStart: '',
timeTueEnd: '',
timeWedStart: '',
timeWedEnd: '',
timeThuStart: '',
timeThuEnd: '',
timeFriStart: '',
timeFriEnd: '',
timeSatStart: '',
timeSatEnd: '',
timeSunStart: '',
timeSunEnd: ''
});
The days array:
const days = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
];
However, Im' getting the following on the first loop:
EmployeeWorkShiftsView.vue:142 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'timeMonStart')
I'm relatively new with Vue, and hope that someone can shed some light onto this for me?
:initialValuesbut you didn't assign any value to it, so maybe that's the problem? attribute with no value might be why it cannot read the property on undefined.