ion-datetime unable to update the hours correctly

Issue

In my vue3 application I have the following "ion-datetime" with the assigned modal value called "mytime", which is merely an empty "ref()".

   <ion-datetime-button datetime="datetime1"></ion-datetime-button>
    <ion-modal :keep-contents-mounted="true">
       <ion-datetime 
       id="datetime1" 
       :value="mytime"
       @ion-change="mytime = $event.target.value, check()"
       />
    </ion-modal>

I use the function "check()" to console.log the "mytime" whenever a change occurs

const mytime = ref()
const check = () => {
  console.log(mytime.value)
}

When i update the date "mytime" is updated just fine but whenever i try updating time no changes occur according to my console. Why is that?

Solution

<ion-datetime-button datetime="datetime1"></ion-datetime-button>
<ion-modal :keep-contents-mounted="true">
  <ion-datetime
    id="datetime1"
    :value="mytime"
    @ion-change="(e)=>{(mytime = e.target.value); check()}"
  />
</ion-modal>

I would recommend getting the event directly from the change event and not $event

Answered By - Aaron Saunders