[vuejs]buttonのtypeを忘れていた。[html]

はじめに

最近タスクが落ち着いてきてそれなりの頻度で書くことができています。（当社比）

くるしめられた！

とあるページで、取得してきた画像を削除するページがありましたとさ・・・

button.vue

<template>
    <div v-for="(image, index) in images" :key="index">
        <img :src="image.file_path" />
        <button @click="onDeleteImage(image.id)"></button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                images: [],
            }
        },
        methods: {
            async onDeleteImage(id) {
                if (!confirm('削除してもよろしいですか？')) {
                    return
                }
                try {
                    const resp = await axios.delete('/api/image/'+id)
                    if (resp.data.result) {
                        alert('削除しました。')
                        this.getItems()
                    } else {
                        // error message
                    }
                } catch (error) {
                    console.error(error);
                }
            }
        }
    }
</script>

imagesは画面読み込み時(getItems)で取得されている想定です。
delete前

delete後

削除後、alertのみで遷移の命令とか出してないな・・・って思ったんだけど、、、

初歩的なミス・・・

<button type="button" ~~~

だった・・・
どうやらbuttonタグは typeがないと初期でsubmitになるらしく、
buttonにもtype="button"と指定してあげないと画面遷移？が入るみたいでした。

まとめ

buttonなんだから初期でbuttonにしろと思ったのは僕だけではないはず。