Question

Vue Kalendar应用程序遇到了一些麻烦，请按照字母上的说明进行操作。

在此处找到链接：https://kalendar.altinselimi.com/?ref=madewithvuejs.com

我的代码中包含以下内容（必须将kalendar-vue.css更改为KalendarVue.css才能正常工作，所以不确定是否遗漏了其他内容）。

此刻我遇到了几个错误，

创建的挂钩中出现错误：“ TypeError：无法设置未定义的属性'getEvents'”

和

创建的挂钩中出现错误：“ TypeError：无法设置未定义的属性'buildWeek'”

我正在使用的代码中没有生命周期挂钩，所以我不确定组件本身是否存在问题，我一直在环顾四周，没有人提到这件事，所以看来我的东西好像有问题代码。

<template>
    <kalendar :configuration="calendar_settings" :events="events"/>
</template>

<script>
import {
    Kalendar
} from 'kalendar-vue';
import 'kalendar-vue/dist/KalendarVue.css';

export default {
    components: {
        Kalendar,
    },
    data: () => ({
        events: [],
        calendar_settings: {
            style: 'material_design',
            view_type: 'week',
            cell_height: 20,
            scrollToNow: true,
            current_day: new Date(),
            read_only: false,
            day_starts_at: 0,
            day_ends_at: 24,
            overlap: true,
            hide_dates: ['2019-10-31'], // Spooky
            hide_days: [6],
            past_event_creation: true
        },
        new_appointment: {
            title: null,
            description: null
        }

    }),

    methods: {
        addEvent(popup_data, form_data) {
            let payload = {
                data: {
                    title: this.new_appointment.title,
                    description: this.new_appointment.description,
                },
                from: popup_info.start_time,
                to: popup_info.end_time,
            };

            this.$kalendar.addNewEvent(
                payload,
            );
            this.$kalendar.closePopups();
            this.clearFormData();
        },

        // Remove Event
        removeEvent(kalendarEvent) {
            let day = kalendarEvent.start_time.slice(0, 10);
            this.$kalendar.removeEvent({
                day,
                key: kalendarEvent.key,
                id: kalendarEvent.kalendar_id,
            })
        },
    }

}
</script>

<style scoped>

</style>

上面的代码是我正在使用的组件。

Answer 1

我以前从未使用过此组件，但快速浏览源代码会发现：

https://github.com/altinselimi/kalendar/blob/4b1a834b5945e4f61bca6e4e1f333114a0554c8a/src/components/kalendar/kalendar-container.vue#L230

因此，在created的{{1}}钩子内是：

kalendar-container.vue

这与您看到的错误消息有关。

问题是this.$kalendar.getEvents = () => {应该从哪里来？

在源中进行进一步的挖掘可以在这里找到它：

https://github.com/altinselimi/kalendar/blob/4b1a834b5945e4f61bca6e4e1f333114a0554c8a/src/main.js#L6

为什么不将其添加到插件的$kalendar函数中，我不知道，但是似乎您需要自己添加：

install

仅几分钟，在查看源代码后，我就会对在自己的应用程序中使用此组件感到不安。

在已创建的挂钩，Vue Kalendar插件中未定义的getEvents

1 个答案: