VueJS组件传参与API更新异常：日历值显示[object Object]问题

问题描述 #

我在Month组件中传递如下props：

props: {
  actionEvents: this.selectedEvent && this.selectedEvent.calendar && this.selectedEvent.id || this.selectedEvent
}

在ChangeCalendar组件中，尝试通过以下方式更新API：

? this.$api.calendar.update(
  this.actionEvents && this.actionEvents.id && this.actionEvents.calendar || this.actionEvents,
  data 

更新路由需同时用到id和calendar值，但输出路由为："/calendars/f2User-51-5594439/events/[object Object]"。我期望此处返回字符串类型的日历值（如f2User-51-actions）。

请问我哪里出错了？为何id返回预期值但calendar却没有？（组件数据显示selectedEvent中的calendar是一个包含id属性的对象，而非字符串）

错误原因 #

1. props传递逻辑错误
   你写的this.selectedEvent && this.selectedEvent.calendar && this.selectedEvent.id || this.selectedEvent逻辑存在问题：这个表达式会按顺序判断条件，最终返回的是this.selectedEvent.id（字符串），而非包含id和calendar的完整数据；只有当前面所有条件不满足时，才会返回this.selectedEvent对象。但从数据来看，你需要的是selectedEvent.calendar.id这个字符串值，而非calendar对象本身。

2. API调用参数错误
   在ChangeCalendar组件中，若actionEvents是之前传递的selectedEvent.id（字符串），那么this.actionEvents.id会是undefined，逻辑会走到|| this.actionEvents；若actionEvents是selectedEvent对象，直接传递this.actionEvents.calendar（对象）拼接进路由，就会被转成[object Object]。

解决方法 #

1. 修正Month组件的props传递
   传递包含正确id和calendar字符串值的对象，或者直接传递完整的selectedEvent：

// 方式1：传递整理后的目标数据
props: {
  actionEvents: this.selectedEvent ? {
    id: this.selectedEvent.id,
    calendar: this.selectedEvent.calendar.id // 取calendar对象的id属性，得到字符串
  } : null
}

// 方式2：直接传递完整对象，后续按需取值
props: {
  actionEvents: this.selectedEvent || null
}

2. 修正ChangeCalendar组件的API调用
   如果传递的是完整selectedEvent对象，调用时明确取对应属性：

this.$api.calendar.update(
  {
    id: this.actionEvents.id,
    calendar: this.actionEvents.calendar.id
  },
  data
)

如果传递的是方式1整理后的对象，直接传参即可：

this.$api.calendar.update(this.actionEvents, data)

3. 路由拼接验证
   确保路由拼接时使用字符串类型的calendar值：

`/calendars/${this.actionEvents.calendar}/events/${this.actionEvents.id}`

内容的提问来源于stack exchange，提问作者marry