F7 Vue: emit custom events

Questions
1

Hi,

i try to emit a custom event on one component (vue file) which should be handled in another one.

something like this:

methods: {
informOtherVueFile: function() {
this.$emit(‘MyCustomEvent’, ‘Hallo’);
},

Whatever i try on the other component, nothing happening (here).
I tried to google for it already, but the examples are for F7 (not F7 VUE!) or not working (for me).
Often its not clear where exactly i have to put the code.

Can y help me please?

2

change to

this.$root.$emit(‘MyCustomEvent’, ‘Hallo’);

And in another

this.$root.$on('MyCustomEvent', () => {
  console.log('hello')
})
3

Sorry, i have a followup question:

So far i get this event, but im unable to call a function of the vue file, like so:

    methods: {
        connect: function(item) {
            // do something with item
        },

},
mounted() {
this.$f7ready((f7) => {
this.$on(‘MyCustomEvent’, function(data) {
// here i want to call the component method “connect(data)”
})
}

On iNet i always see “on { … }” in same level as “mounted,data” , but as i said before , that doesnt work for me.

4 
this.$on('MyCustomEvent', this.connect)
5

yes, that was my FIRST try…but i get this:

[Vue warn]: Error in event handler for “MyCustomEvent”: “TypeError: this.connect is not a function” with $root and nothing on this.$on(…)

6

why dont you use f7 events, as nolimits suggest?

7

cause i got messed up with the arrow function. Stupid me.
Thanks, now everything works (simply “this.myFnc” is enough).

1 Like