Event listener not working

[croudtech]

Event listener not working

[BrockReece]

So I have just published a new version of the repo which I hope will address some of your issues.
I am a bit pressed for time at the moment, but here is an example webpack app I built using the new version. Give me a shout though if you need anything explaining.

https://github.com/BrockReece/vue-fullcalendar-example

[BrockReece]

Hello,

Maybe I have misunderstood the question but the event handlers in this component are Vue events from Vue 1.x that call the jQuery events on fullcallendar. They can be triggered from the parent component with:

this.$broadcast('event-name')

BTW, The $(this.$el) jQuery selector will only ever work inside its own component

I hope this helps?
Brock

[BrockReece]

@Jaquedeveloper

Cool, So I have just moved to Vue 2 myself and I am still trying to figure out the best way to handle the events too.

I think I am going to build a standalone Vue2 application this morning and try out a few different things and then I will get back to you.

You definitely have the correct fullcalendar event btw, I have built something similar in Vue 1 in the past and that worked for me.

[BrockReece]

Ah ok sorry, that was the boilerplate readme file.
I used yarn for my package management
https://yarnpkg.com/en/

[Jaquedeveloper]

@BrockReece Thanks.

I'm using Vue 2.0 in my project along with Laravel. I've seen that the broadcast is deprecated in Vue 2.0.

My goal is to have live updates, so every time a new event is created, another call to the server is made (through the 'refetch-events' event) in order to get the list of events again and get it the appear in the view.

The vue-fullcalendar docs says it listens on this Event:

refetch-events() - Makes another JSON call to event sources

Which I think is the most appropriate for my case...
I am already listening to event creation using laravel broadcasting system, Pusher and another Vue component. Every time a new event is created a notification is shown on the screen.

I'm pretty lost trying to make the live updates in my vue-fullcalendar component...

I've seen something about bus events, should I use event hub and $emit?
eventHub.$emit(eventName)

Again, thanks for your response.

[Jaquedeveloper]

@BrockReece, Thank you very much. It will help not only me but other developers too, for sure.
For now I am getting two Unexpected token { errors and when the page loads, a blank page with Cannot GET / is shown... I've been trying to figure out why. l'll try to figure it out and tell you how I go.

The errors:

 ERROR  Failed to compile with 2 errors                               9:44:23 PM

 error  in ./~/fullcalendar/dist/fullcalendar.css

Syntax Error: Unexpected token {

 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-3d91f566","scoped":false,"hasInlineConfig":false}!./~/fullcalendar/dist/fullcalendar.css 4:14-229 13:3-17:5 14:22-237
 @ ./~/vue-full-calendar/components/FullCalendar.vue
 @ ./~/vue-full-calendar/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

 error  in ./src/App.vue

Syntax Error: Unexpected token {

 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-2d4b47f2","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-303 13:3-17:5 14:22-311
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

[BrockReece]

Have you installed the dependencies?
Do you use yarn?

[Jaquedeveloper]

I've followed the instructions:
npm install
then
npm run dev

[Jaquedeveloper]

Worked like a charm! I'll use it as a basis to implement my project live updates.

[BrockReece]

Awesome, do you mind if I close this issue?

[Jaquedeveloper]

No, I've managed to get it working by calling the trigger directly from my component. I've had also to include the resources data on computed method to get it working:

mounted() {
            const cal = $(this.$el),
                self = this;

            cal.fullCalendar({
                header: this.header,
                select(start, end, jsEvent) {
                    ...
                    var calen = this.calendar;
                    ...
                    $.fancybox({
                        type: "iframe",
                        ...
                        afterClose: function(){
                            setTimeout(function(){ calen.refetchEvents(); }, 2000);     
                        }
                    });
                }
            });
},
computed: {
            eventSources() {
                const self = this;
                return [
                    {
                        events(start, end, timezone, callback) {
                            Vue.http.get('/getAgendamentosEventos', {timezone: timezone}).then(response => {
                                    callback(response.data.events)
                                })
                        },
                        color: '#1ABC9C',
                    },
                    {
                        events(start, end, timezone, callback) {
                            Vue.http.get('/getDatasFechadas', {timezone: timezone}).then(response => {
                                callback(response.data.events)
                            })
                        },
                        color: '#DC0000',
                    }
                ];
            },
        },

here's my stackoverflow question which helped me to have the insight:
http://stackoverflow.com/questions/43037140/how-to-refresh-the-vuejs-view-via-event

special thanks for @BrockReece for the support.
My application is up and running now.