구성 요소 내부에 생성된 FullCalendar 개체 내부에서 Vue 구성 요소 개체에 액세스하는 중

구성 요소 내부에 생성된 FullCalendar 개체 내부에서 Vue 구성 요소 개체에 액세스하는 중

VueJ와 함께 Full Calendar를 사용하고 있는데 달력에서 시간을 클릭할 때마다 커스텀 모달(modal)을 열고 싶습니다.단, 모달 열기 위해 전체 달력 오브젝트 이외의 다른 함수를 호출해야 하는데, 사용 중이기 때문에 어떻게 해결해야 할지 모르겠습니다.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 
        }
    }
}

이것은 새로운 사용자가 자주 사용하는 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변수.

이 기술은 화살표 기능에 의해 대부분 폐지되지만 오래된 브라우저를 지원하는 데 사용할 수 있으므로 알아두면 좋습니다.

언급URL : https://stackoverflow.com/questions/47245469/accessing-vue-component-object-from-inside-fullcalendar-object-created-inside-th