Vue中HotelDatePicker的@check-in-changed传值到modal时返回undefined问题

核心问题原因 #

你目前的写法是在事件回调函数中return日期值，但Vue模板无法直接获取事件回调的返回值作为绑定数据，你没有将拿到的日期存入组件的响应式状态中，所以绑定到modal标题时会读取到undefined。

解决步骤 #

1. 首先在组件的data选项中声明两个响应式变量，用于存储入住、退房日期

data() {
  return {
    // 其他已有业务变量...
    startDate: null,
    endDate: null
  }
}

2. 修改两个事件回调方法，将拿到的日期赋值给上面声明的响应式变量，不需要return值

getStartDate(newDate) {
  console.log(newDate)
  this.startDate = newDate
},
getEndDate(newDate){
  this.endDate = newDate
}

3. 在modal的标题处直接绑定这两个响应式变量即可，可以根据需求格式化日期展示

<!-- modal标题示例，日期可以根据需求调用toLocaleString、toLocaleDateString等方法自定义格式 -->
<Modal :title="`入住：${startDate?.toLocaleDateString()} 退房：${endDate?.toLocaleDateString()}`">
  <!-- modal内部内容 -->
</Modal>

注：上述示例适配你当前使用的Vue2 Options API写法，如果你使用Vue3 Composition API，仅需将响应式变量改为ref/reactive声明即可，事件绑定逻辑无需调整。

内容的提问来源于stack exchange，提问作者Josip Marić