【Vue × Firestore】削除機能の追加

削除機能の追加

list.vue

<button class="hide-btn" @click="deletePost">×</button>

list.vue

deletePost() {
 firebase
 .firestore()
 .collection("posts")
 .doc(this.$route.params.uid)
 .delete();
}

router.vue

  {
    path: "/board/:uid",
    name: "Board",
    component: Board,
  },

clickしたらdeletePost()が発火します。
postsというコレクションを参照して、現在のURLのパラメータを取得。
delete()で対象を削除します。

この記述のみで削除機能を実装可能です。

おまけ

【Vue.js】vue-swalを使ってアラートを実装

vueにはvue-swalという便利なライブラリをがあります。
このライブラリを使用して削除の際にアラートを付けてあげるとより良いでしょう。