Laravel で投稿処理を終えた後、フラッシュメッセージを表示します。
そのメッセージが×ボタン(svg)を押すと消える実装をしようとしているのですが、うまくいきません。
<script src="https://unpkg.com/vue@3"></script>
<p id="test" v-if="show">
<small>{{ session('message') }}</small>
<svg v-on:click="delete" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
</p>
<script>
Vue.createApp({
data() {
return {
show: true
}
},
methods: {
delete() {
this.show = false
}
}
}).mount('#test')
</script>
これで表示してみると、
要素のみ表示され、その中の要素は空になってしまいます。
svg の v-on:click="delete" を削除すると、正常に表示されますが、当然クリックしても何も起きません。(フラッシュメッセージは消えません)
どうすればよいでしょうか?