vue.js $カスタムイベントが出力されない

Question

私はvue.js（2）を初めて使用しています。私はバニラJSを書いています。

私はカスタムイベント（close）を使用しようとすると、 "、expected"と "：expected"の構文エラーが発生します。私が望むのは、ビュー内のコンポーネントにカスタムのcloseイベントを追加することです。次に、コンポーネントのテンプレートで、私は、クリックイベントがカスタムクローズイベントに到達しようとします。それは

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 
    } 

}); 

は、私が見ることができない何かがあるのか​​、私が間違っているのでしょうか？私はそれを正しく得ることができません。

Answer 1

テンプレート内で使用する単一引用符をエスケープする必要があります。

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

ここにコードworkingがあります。