F7 Vue: emit custom events


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?

change to

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

And in another

this.$root.$on('MyCustomEvent', () => {

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.

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

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(…)

why dont you use f7 events, as nolimits suggest?

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

1 Like