Question

我在VueJS上使用完整日历，每当我点击日历上的时间时，我想打开一个自定义模式。但是，我需要在Full日历对象之外调用一个单独的函数来打开我的模态，我不知道如何解决这个问题，因为在Full Calendar中使用this将引用该对象和Vue组件对象。我需要获得Vue组件对象，这是我到目前为止尝试的无效

export default {
    name: 'MyComponent',
    methods: {
        myFunc () {
            // should get called from inside fullCalendar below
            this.$store.dispatch()  // this.$store works here since `this` refers to Vue component 
        }
    },
    mounted () {

        $('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
        },
        navLinks: true,
        eventLimit: true,
        defaultView: 'agendaWeek',
        editable: true,
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            console.log(this)   // refers to Full Calendar object
            console.log(this.$parent)   // getting null, need to call function in vue component
            console.log(this.myFunc()) // cannot do this since this will try to call a function in Full Calendar library
            console.log(this.$parent.$store) // getting null, need to get store that I defined 
        }
    }
}

Answer 1

这是一个常见的javascript范围问题，新用户会遇到这种问题。正如您所发现的那样，this是一个流动的概念。

有两种解决方法。第一种是使用箭头功能。箭头函数将this绑定到创建它们的上下文：

select:  (start, end) => {
        console.log(this)   // should be your vue instance 
    }

另一种方法是在this功能的顶部存储对mounted的引用。此变量通常命名为self。

var self = this;

....

select: function (start, end) {
        console.log(self) // also your vue instance
    }

这样，即使this反弹到回调中的其他对象，您仍然可以通过self变量到达原始对象上下文。

此技术在很大程度上被箭头功能淘汰，但仍可用于支持旧浏览器，并且很容易了解。

从组件内部创建的FullCalendar对象内部访问Vue组件对象

1 个答案: