时间戳

首页 > 解决方案 > 在 Vuetify 日历中使用嵌入式属性

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

问题描述

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

我在文档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>

标签： javascriptvue.jscalendarvue-componentvuetify.js

解决方案

在探索vuetify 插件的源代码后，后者期望值作为直接属性存在于事件对象中。所以你不能访问其他嵌套的“孩子”，它必须是一个直接的财产。

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

attributes1-通过将内部属性移动到对象的根来映射您的事件数组，然后将此道具传递给v-calendar：event-start="startDate"

2- 使用从 API 获取原始 JSON 的方法创建一个 javascript 类 (MyEvent) fromJson（这样您将 JSON 封装到域对象中）并返回 MyEvent 实例数组。例如，您可以这样做：events[0].start您甚至不必将其作为值传递给event-start道具，因为默认情况下它需要一个start属性作为默认值。

这种替代方案的另一个优点是，由于事件现在被封装到它自己的 javascript 类中，您可以添加辅助方法、getter/setter 或任何原本会在您的“视图”逻辑中的逻辑，并有助于获得更好的关注点分离。

推荐阅读