Question

几个小时以来，我一直在为这个错误Error in mounted hook: "TypeError: cal.fullCalendar is not a function"而苦苦挣扎。我是Vue.js的新手。该项目是带有Vue的Laravel。

package.json是

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "flatpickr": "^4.0.6",
    "izitoast": "^1.1.5",
    "moment": "^2.19.1",
    "vee-validate": "^2.0.0-rc.19",
    "vue-bootstrap-datetimepicker": "^4.1.0",
    "vue-flatpickr-component": "^4.0.0",
    "vue-full-calendar": "^2.1.2",
    "vue-fullcalendar": "^1.0.9",
    "vuejs-datepicker": "^0.9.18"
  }
}

我的component.vue是

<full-calendar ref="calendar" :config="config" :events="appointments" :editable="false"></full-calendar>


import BookAppointmentModal from './BookAppointmentModalComponent.vue';

    export default {

        components: {
            BookAppointmentModal
        },

        props: {

            businessHours: {
                default: false
            },

            provider: {
                default: false
            }

        },
...
 }

全日历，使用其vue组件调用

mounted() {
            const cal = $(this.$el),
                self = this

            this.$on('remove-event', (event) => {
                if(event && event.hasOwnProperty('id')){
                    $(this.$el).fullCalendar('removeEvents', event.id);
                }else{
                    $(this.$el).fullCalendar('removeEvents', event);
                }
            })

            this.$on('rerender-events', () => {
                $(this.$el).fullCalendar('rerenderEvents')
            })

            this.$on('refetch-events', () => {
                $(this.$el).fullCalendar('refetchEvents')
            })

            this.$on('render-event', (event) => {
                $(this.$el).fullCalendar('renderEvent', event)
            })

            this.$on('reload-events', () => {
                $(this.$el).fullCalendar('removeEvents')
                $(this.$el).fullCalendar('addEventSource', this.events)
            })

            this.$on('rebuild-sources', () => {
                $(this.$el).fullCalendar('removeEventSources')
                this.eventSources.map(event => {
                    $(this.$el).fullCalendar('addEventSource', event)
                })
            })

            cal.fullCalendar(defaultsDeep(this.config, this.defaultConfig))
        },

建立资产后，我在该页面上收到上面的错误。试图升级vue重新安装的节点模块，但未修复。

任何想法？

安装的挂钩中出现错误：“ TypeError：cal.fullCalendar不是函数”

0 个答案: