내부에서 Vue 구성 요소 객체에 액세스 구성 요소 내에 생성 된 FullCalendar 객체

Question

전체 일정을 VueJS와 함께 사용하고 있으며 캘린더에서 시간을 클릭 할 때마다 사용자 지정 모달을 열려고합니다. 그러나, 내 모달을 열려면 전체 일정 개체 외부에서 별도의 함수를 호출해야하며 전체 일정 내에 this을 사용하면 해당 개체와 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

이 새로운 사용자가 박히 일반적인 자바 스크립트 범위 지정 문제로 지금까지 시도거야. 당신이 발견 한 것처럼 this은 유체 개념입니다.

두 가지 방법이 있습니다. 첫 번째는 화살표 기능을 사용하는 것입니다. 화살표 기능은 생성 된 컨텍스트에 바인딩 this을 유지 :

이

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

다른 하나는 당신의 mounted 함수의 상단에 this에 대한 참조를 저장하는 것입니다. 이 변수의 이름은 일반적으로 self입니다. this가 콜백 내 다른 개체에 회복되는 경우에도

var self = this; 

.... 

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

이 방법, 당신은 여전히 ​​self 변수를 통해 원래의 개체 컨텍스트를 얻을 수 있습니다.

이 기술은 주로 화살표 기능에 의해 사용되지 않지만 이전 브라우저를 지원하는 데 여전히 사용될 수 있으므로 알아두면 좋습니다.