vue.js $ emittieren benutzerdefinierte Ereignis nicht funktioniert

Question

Ich bin neu in vue.js (2). Ich schreibe Vanille JS.

Wenn ich versuche, ein benutzerdefiniertes Ereignis (schließen) zu verwenden, erhalte ich einen Syntaxfehler von ", erwartet" und ": erwartet". Ich möchte ein benutzerdefiniertes Close-Ereignis zu einer Komponente in der Ansicht hinzufügen. Dann versuche ich in der Vorlage der Komponente, dass das Klickereignis das benutzerdefinierte Schließen-Ereignis erreicht. Es funktioniert nicht ..

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 
    } 

}); 

Gibt es etwas, das ich nicht sehen kann, oder ich falsch mache? Ich kann es nicht richtig machen.

Answer 1

Sie müssen die einfachen Anführungszeichen, die Sie in Ihrer Vorlage verwenden, umgehen.

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>' 

Hier ist Ihr Code working.