内部からVueコンポーネントオブジェクトにアクセスするコンポーネント内に作成されたFullCalendarオブジェクト

Question

VueJSでフルカレンダーを使用しています。カレンダーで時間をクリックするたびにカスタムモーダルを開きます。しかし、フルカレンダーオブジェクトの外に別の関数を呼び出してモーダルを開く必要があります。フルカレンダー内で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は流動的な概念です。

2つの方法があります。 1つ目は、矢印機能を使用することです。アロー機能は、それらが作成されたコンテキストにバインドthisを保つ：

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

他があなたのmounted機能の上部にthisへの参照をオフに格納することです。この変数は一般にselfという名前です。

var self = this; 

.... 

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

この方法で、thisはコールバック内部に別のオブジェクトへの反動であったとしても、あなたはまだself変数を介して、元のオブジェクトコンテキストを取得することができます。

このテクニックは、ほとんどの場合、矢印関数によって廃止されましたが、古いブラウザをサポートするために使用することができ、知っておきたいことです。