[Feature Request] Add support for "events" object in each vue

[ajusa]

This is a bit hard to explain, but basically in VueJS 1, the events object was an alias for .on, or whatever the function name was. It would be amazing if that was supported through this plugin.

events: {
        'alert': function(msg) {
            this.alerts.unshift(msg)
        },
        'removeAlert': function(msg) {
            this.alerts.$remove(msg)
        },
    },

Please tell me if you want me to elaborate, as this was poorly explained

[cklmercer]

I've actually been debating adding support for the following.

listeners: {
    testEvent(data) {
        console.log(data);
    },

    anotherTestEvent: {
        on: 'beforeMount',
        handler(data) {
            console.log(data);
        }
}

I think by the default it's probably best to hook events onto the mounted hook, but I would like to allow for others hooks.

listeners vs events for an option name is debatable. I'm leaning towards listeners, just because I don't want people to think they can use the option to emit events.

Feedback is appreciated, thank you!

[ajusa]

This is pretty much exactly what I wanted. If you could implement that, I would be very happy :) Side note: here is the code from vuejs that does this (I think?)

Vue.prototype._initEvents = function () {
      var options = this.$options;
      if (options._asComponent) {
        registerComponentEvents(this, options.el);
      }
      registerCallbacks(this, '$on', options.events);
      registerCallbacks(this, '$watch', options.watch);
    };

[ajusa]

Also, I think it would be better to use "events" instead of "listeners" so that people with existing vue 1 codebases can use this plugin without any problems.

[cklmercer]

Ah, okay! That makes sense. I actually didn't even know that this was part of Vue 1.x, but since it is I'll keep the API. I'll start working on this this afternoon. Shouldn't take too long.

[ajusa]

Thank you so much! It saves me lots of time and keystrokes! Old Way:

ready: function() {
        var self = this;
        this.$events.on('alert', function(msg) {
            self.alerts.unshift(msg)
        });
        this.$events.on('removeAlert', function(msg) {
            self.alerts.$remove(msg)
        })
    },

New Way:

events: {
        'alert': function(msg) {
            this.alerts.unshift(msg)
        },
        'removeAlert': function(msg) {
            this.alerts.$remove(msg)
        },
    },

[cklmercer]

This is surprisingly difficult. If know how to do this, a pull request would be fantastic. If not, I'll just keep hacking away at it. I'm sure I'll figure it out before too long.

[ajusa]

I have no idea how to do this. I just started using vue two weeks ago, so I haven't gotten in to making plugins/mixins. I assumed that the code I posted earlier might be of some help, seeing as I found it in the library, but it appears I was wrong. I really hope that you can do it :D

[cklmercer]

It may take me a day or two, but I'm sure I'll get it figured out before too long. There's just a couple "gotchas" that I'm trying to figure out.

[ajusa]

Okay. I will see if I can also get it to work on my end. I really hope that we can get this to work, as I am structuring a project of mine around your plugins :smile: (I really like the work that you have done for Vue)

[cklmercer]

We'll definitely get it. I've got it to a point where its firing the events like it should, but I'm struggling to get the event data. Just need to do some research and give it some time to sink in.

[cklmercer]

This is what I've got so far, but the it's not firing the callbacks with their arguments.. Pretty sure it's just my lack of JS knowledge holding up this feature. I'm trying to get some help from the community now.

Vue.mixin({

    beforeCreate() {

        if (typeof this.$options.events != 'object') return;

        this.$on('hook:mounted', () => {

            for (var key in this.$options.events) {
                let cb = this.$options.events[key];

                events.on(key, cb.apply(this));
            }
        });
    }

});

[cklmercer]

Woowee! Okay, I've hacked and slashed all day, and I believe I have an initial implementation. It'll only work with Vue 2.0, but at the same time this feature isn't needed in Vue 1.0.

It currently only supports one syntax

events: {
    eventName(data) {
        console.log(data);
    }
}

@Ajusa: Would you mind helping me test using the events-option-feature branch?

[ajusa]

Sure! I can do this tomorrow morning and I'll let you know if I run into anything that breaks! Thank you so much!

Also, if this could support Vue 1, that would be cool too. My app isn't ported to Vue 2 thanks to a few other plugins that haven't been updated. I'll code with your version though :D