Saya menggunakan kalender penuh dengan VueJS dan saya ingin membuka modal kustom setiap kali saya mengklik waktu di kalender. Namun, saya perlu memanggil fungsi terpisah di luar objek kalender Penuh untuk membuka modal saya dan saya tidak yakin bagaimana menyelesaikannya karena menggunakan this di dalam Kalender Penuh akan merujuk ke objek itu dan objek komponen Vue . Saya perlu mendapatkan objek komponen Vue, inilah yang saya coba sejauh ini tetapi tidak berhasil

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 
        }
    }
}
1
user3226932 12 November 2017, 07:35

1 menjawab

Jawaban Terbaik

Ini adalah masalah pelingkupan javascript umum yang membuat pengguna baru terjebak. this, seperti yang Anda temukan, adalah konsep yang lancar.

Ada dua cara untuk mengatasinya. Yang pertama adalah menggunakan fungsi panah. Fungsi panah menjaga this terikat pada konteks di mana mereka dibuat:

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

Yang lainnya adalah menyimpan referensi ke this di bagian atas fungsi mounted Anda. Variabel ini biasanya diberi nama self.

var self = this;

....

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

Dengan cara ini, meskipun this di-rebound ke objek yang berbeda di dalam callback Anda, Anda masih bisa mendapatkan konteks objek asli melalui variabel self.

Teknik ini sebagian besar sudah usang oleh fungsi panah, tetapi masih dapat digunakan untuk mendukung browser lama, dan bagus untuk diketahui.

2
akatakritos 12 November 2017, 04:53