vue.js $emit custom event not working

Question

I am new to vue.js (2). I am writing vanilla JS.

When I try to use a custom event (close) I get a syntax error of ", expected" and ": expected". What I want is to add a custom close event to a component in the view. Then, in the template of the component I try to have the click event reach the custom close event. It is not working..

HTML

<div id="root" class="container">
    <bulma-modal v-if="showBulmaModal" @close="showBulmaModal = false"></bulma-modal>
    <button @click="showBulmaModal = true" class="button">Show modal</button>
</div>

JS

Vue.component('bulma-modal', {
    template: '<div class="modal is-active"><div class="modal-background"></div><div class="modal-content"><div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><button class="modal-close" @click="$emit('close')"></button></div>'
});

new Vue({
    el: '#root',
    data: {
        showBulmaModal: false
    }
});

Is there something I can't see or I am doing wrong? I can't get it right..

Your bulma-modal template uses single quotes around close which ends the template at the first one. Try $emit(\'close\') — Bert
– Bert, Commented Mar 25, 2017 at 1:52

Bert · Accepted Answer · 2017-03-25 02:12:56Z

3

You need to escape the single quotes you use inside your template.

template: '<div class="modal is-active"><div class="modal-background"></div><div class="modal-content"><div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><button class="modal-close" @click="$emit(\'close\')">Close</button></div>'

Here is your code working.

answered Mar 25, 2017 at 2:12

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

vue.js $emit custom event not working

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