Vue3中ion-datetime无法正确更新小时值的问题排查

核心原因 #

1. Ionic ion-datetime 事件触发逻辑：ion-change 事件默认仅在用户完成完整选择确认（比如关闭模态框、点击确认按钮）时触发。修改日期时，组件内部会将日期切换视为“阶段性完成选择”，从而提前触发事件；但仅修改小时这类时间维度时，组件不会立即触发 ion-change，导致你的 check() 函数未执行。
2. 初始值类型问题：你将 mytime 初始化为空的 ref()（即 undefined），而 ion-datetime 的 value 属性更适配 null 或 ISO 格式字符串，undefined 可能导致组件处理时间更新时的响应式异常。

解决方案 #

方案1：改用 ion-input 事件

ion-input 会在组件值的每一次变化时触发（包括小时、分钟修改），能实时同步值并执行你的逻辑：

<ion-datetime-button datetime="datetime1"></ion-datetime-button>
<ion-modal :keep-contents-mounted="true">
  <ion-datetime 
    id="datetime1" 
    :value="mytime"
    @ion-input="handleDatetimeChange"
  />
</ion-modal>

const mytime = ref(null)
const check = () => {
  console.log(mytime.value)
}
const handleDatetimeChange = (event) => {
  mytime.value = event.target.value
  check()
}

方案2：调整 ion-change 触发时机（可选）

如果坚持使用 ion-change，可以给模态框添加确认按钮，点击确认时手动同步值并执行 check()：

<ion-datetime-button datetime="datetime1"></ion-datetime-button>
<ion-modal :keep-contents-mounted="true" ref="datetimeModal">
  <ion-datetime 
    id="datetime1" 
    :value="mytime"
    ref="datetimeRef"
  />
  <ion-button @click="confirmDatetime">确认</ion-button>
</ion-modal>

const mytime = ref(null)
const datetimeModal = ref(null)
const datetimeRef = ref(null)
const check = () => {
  console.log(mytime.value)
}
const confirmDatetime = () => {
  mytime.value = datetimeRef.value.value
  check()
  datetimeModal.value.dismiss()
}

方案3：显式设置初始值为 null

即使不改事件，将初始值从空 ref() 改为 ref(null)，也能减少组件处理值更新时的异常：

const mytime = ref(null)

内容的提问来源于stack exchange，提问作者Otorrinolaringologista-man