How to set predefined values for Select and Datetime

Ionic 5 Vue version

I have two components
Ion Select and Ion DateTime, I need to setup predefined values. However using v-model wont work. Any work around?

Html Structure

<ion-item lines="none" class="input">
                    <ion-label>Priority</ion-label>
                    <ion-select v-model="todoPriority">
                        <ion-select-option value="low">Low</ion-select-option>
                        <ion-select-option value="middle">Middle</ion-select-option>
                        <ion-select-option value="high" selected>High</ion-select-option>
                    </ion-select>
                </ion-item>

                <ion-item lines="none" class="input">
                    <ion-icon :icon="calendarOutline" slot="start"></ion-icon>
                    <ion-label >Due Date </ion-label>
                    <ion-datetime v-model="todoDueDate"  displayFormat="D MMM YYYY H:mm"></ion-datetime>
                </ion-item>

JS

const tomorrow = new Date();
const predefinedDate = tomorrow.setDate(tomorrow.getDate() + 1);
const todoPriority = ref<string>('Low')
const todoDueDate = ref<number>(predefinedDate)

I think it would be better to figure out why v-model is not working in your application. Two things I can see that may be the cause of the issue:

  1. Your todoPriority ref has an initial value of 'Low' (note the uppercase L), but the ion-select-option in your component has a value of 'low' (note the lowercase L). I typically recommend sticking with lowercase values for consistency.

  2. You are not providing an ISO-8601 string to ion-datetime which is required to set the value. An ISO-8601 string looks something like this: "2021-06-11T14:30:35.730Z". You can use the toISOString() method on a Date object to get this.

That was quick. Thanks. Its working now