Cannot dispatch function from component to parent Vue

Question

I have a simple Vue demo that shows a user a modal when they click a button:

http://plnkr.co/edit/lZPD7HOjKFsNVNmnWAOB?p=preview

The problem is, I'm also trying to use a plugin that generates a QR code that would go inside of the modal, so I set up a method inside my component that uses $dispatch to call a function called showQR:

    methods: {
                showQR: function(){
                     console.log("Dispatching event for QR code")
                     this.$dispatch('showQR');
                     return this.showModal = true    
            }
     }

The function inside my parent Vue object looks like this:

new Vue({
        el: 'body',
        events: {
            showQR: function(){
                console.log("Inside the parent Vue")
                new QRCode(document.getElementById("qrcode"), "http://stackoverflow.com/");
            }
        }
    });

I do get the message "Dispatching event for QR code" from the component, but function on the parent Vue isn't working. I can get the QR code to show up if I put the logic inside of the template, but I'd rather avoid that. Any suggestions on how to make $dispatch work? Am I targeting the right Vue? Using VueRouter for this btw. Any help would be great!

Andrius · Accepted Answer · 2016-01-28 07:31:44Z

3

Looks like your main App logic gets overriden by this:

var App = Vue.extend({
    template: '<router-view></router-view>'
})

If you combine your main methods object with this extend, you should be fine. So, something like this would work:

var App = Vue.extend({
    el: 'body',
    events: {
        showQR: function(){
            console.log("Inside the parent Vue")
            new QRCode(document.getElementById("qrcode"), "http://stackoverflow.com/");
        }
    },
    template: '<router-view></router-view>'
})

You also most likely don't want/need el: 'body', in there.

answered Jan 28, 2016 at 7:31

Andrius

5,94922 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot dispatch function from component to parent Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related