在 Vuetify 日历中使用嵌入式属性

Question

我正在尝试使用 Vuetify 中的 v-calendar 组件。

我在 documentation 中看到，如果我的事件没有相同的属性名称，我可以使用 event-start 道具。

问题是我的事件有嵌入式属性，我不知道 event-start 是否处理这种情况。

我的活动：

events: [
      {
        id: 'b9d93291-6d95-47b9-994a-ee9f266fb6b8',
        type: 'reservation_item',
        attributes: {
          start_date: '2020-09-23T00:00:00.000Z',
          end_date: '2020-09-25T00:00:00.000Z',
        },
      },
    ]

来自 vuetify 的事件示例：

events: [
      {
        name: 'Weekly Meeting',
        start: '2020-09-07 09:00',
        end: '2020-09-07 10:00',
      },
    ],

我尝试过类似的操作，但没有用。

<v-calendar
  ref="calendar"
  locale="fr-fr"
  :now="today"
  :value="today"
  :events="events"
  event-start="attributes.start"
  color="primary"
  type="month"
></v-calendar>

Answer 1

在探索源代码 for the vuetify plugin 之后，后者希望该值作为直接属性出现在事件 object 中。所以你不能访问其他嵌套的“children”，它必须是直接的属性.

有两种方法可以使这项工作有效：

1- 通过将 attributes 中的属性移动到 object 的根来映射事件数组，然后将此道具传递给 v-calendar：event-start="startDate"

2- 使用 fromJson 方法创建 javascript class (MyEvent)，从 API 中获取原始 JSON（这样你将 JSON 封装到域 objects) 和 return MyEvent 实例数组中。这样你可以做例如： events[0].start 你甚至不必将它作为值传递给 event-start 道具，因为默认情况下它期望 start 属性作为默认值值。

此替代方案的另一个优点是，由于事件现在被封装到它自己的 javascript class 中，您可以添加辅助方法，或 getters/setter 或任何逻辑否则就在你的“视图”逻辑中，并有助于更好地分离关注点。

Answer 2

为了让它工作，我必须更改我的 events 数据

    <template>
      <v-calendar
        ref="calendar"
        locale="fr-fr"
        :events="myEvents"
        event-start="start"
        color="primary"
        type="month"
      ></v-calendar>
    </template>

  data: () => ({
    events: [
      {
        id: 'b9d93291-6d95-47b9-994a-ee9f266fb6b8',
        type: 'reservation_item',
        attributes: {
          start_date: '2020-09-23T00:00:00.000Z',
          end_date: '2020-09-25T00:00:00.000Z',
        },
      },
    ],
  }),
  computed: {
    myEvents() {
      const reservations = this.reservations
      reservations.forEach((element) => {
        element.start = element.attributes.start_date
        element.name = 'test'
        element.end = element.attributes.end_date
      })

      return reservations
    },
  }

在 Vuetify 日历中使用嵌入式属性

Using embedded attributes in Vuetify Calendar

javascript

calendar

vue.js

vue-component

vuetify.js