【Vue × Realtime Detabase】メッセージを右ボタンで削除をしたいです

#メッセージを右ボタンで削除をしたいです。

Vueとfirebaseを使用してポートフォリオを現在作成しております。

そこで現在チャットを実装しており、メッセージを投稿者のみ削除できるようにしたいです。
下記にて現在のコードを掲載しております。

https://qiita.com/akicho8/items/8522929fa619394ac9f4

こちらの記事を参考にさせていただき、メッセージを右クリックしたらdeleteMessage()が発火するようにしてます。

しかし、js部のdeleteMessage() {firebase.database().ref().remove()にある、ref()部にてどのように記述したら
青で囲ったidが取得できるのか分からず困っております。。

合わせて投稿者のみ削除できるようにするにはどのようにしたらいいのかも教えて頂けると幸いです。
お力添えを宜しくお願い致します。

html
1<div @click.right.prevent="deleteMessage" class="mymessage">
2  <nl2br tag="div" :text="message" />
3</div>

js
1deleteMessage() {
2     firebase
3          .database()
4          .ref()
5          .remove();
6      this.$swal({
7        title: "内容確認",
8        text: "mメッセージを削除しますか？",
9        icon: "warning",
10        buttons: true,
11        dangerMode: true
12      }).then(willDelete => {
13        if (willDelete) {
14          this.$swal("メッセージを削除しました", {
15            icon: "success"
16          });
17          this.$router.go({
18            path: `/board/${this.$route.params.uid}`,
19            force: true
20          });
21        } else {
22          this.$swal("キャンセルしました。");
23        }
24      });
25    }
26  }

css
1.mymessage {
2      display: inline-block;
3      position: relative;
4      margin: 0 20px 0 0;
5      padding: 10px;
6      max-width: 460px;
7      border-radius: 12px;
8      background: #00ec0ccb;
9      z-index: 5;
10      user-select: none;
11    }

#追記

methods: {
    // スクロール位置を一番下に移動
    scrollBottom() {
      this.$nextTick(() => {
        //this.$nextTickは、再描画を待つ。
        //絶対値からbody要素の高さを取得
        window.scrollTo(0, document.body.clientHeight);
      });
    },
    childAdded(snap) {
      //snapshotとは、ある時点における特定のデータベース参照にあるデータの全体像を写し取ったもの
      //childAdded：データベースからアイテムのリストを取得する関数
      // 受け取ったメッセージをchatに追加
      const message = snap.val();
      //イベントのときにデータベース内の「message」データを取得。
      // データベースに新しい要素が追加されると随時呼び出される
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        userid: message.userid,
        time: message.time,
      });
      this.scrollBottom();
      //スクロールの一番下に追加。
    },
    doSend() {
      const time = time;
      if (this.user.uid && this.input.length) {
        //  firebaseに書き込まれたメッセージを追加
        firebase
          .database()
          .ref(this.$route.params.id)
          .push(
            {
              message: this.input,
              name: this.user.displayName,
              image: this.user.photoURL,
              userid: this.user.uid,
              time: firebase.database.ServerValue.TIMESTAMP,
            },

            () => {
              this.input = ""; // フォームを空にする
            }
          );
        console.log(time);
      }
    },
    deleteMessage() {
      firebase
        .database()
        .ref()
        .remove();
      this.$swal({
        title: "内容確認",
        text: "メッセージを削除しますか？",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$swal("メッセージを削除しました", {
            icon: "success",
          });
          this.$router.go({
            path: `/chat/${this.$route.params.id}`,
            force: true,
          });
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },
  },
};

#追記2

#追記３

<template>
  <div class="chat">
    <h1 class="chat-tll flex">
      <div class="flash neon">Chat Room</div>
      <router-link :to="`/board/${this.uid}`" class="back-btn">
        <img
          src="../assets/戻る.jpg"
          alt="チャット終了"
          class="back-btn-icon"
        />
      </router-link>
    </h1>
    <!--Firebase から取得したリストを描画-->
    <transition-group name="chat" tag="div" class="list content">
      <!--chatの中の{ key, name, image, message ,userid }をそれぞれ取得-->
      <section
        v-for="{ key, name, image, message, userid, time } in chat"
        :key="key"
      >
        <div v-if="userid === user.uid" class="myitem flex">
          <!-- 自身 -->
          <!--「画像」の指定-->

          <!--「名前」と「メッセージ」の指定-->
          <div class="mydetail">
            <div class="mytime">{{ $dayjs(time).format("hh:mm") }}</div>
            <div @click.right.prevent="deleteMessage(key)" class="mymessage">
              <nl2br tag="div" :text="message" />
            </div>
          </div>
          <div class="myimage flex">
            <img :src="image" width="40" height="40" />
            <div class="myname">{{ profileDeta.name }}</div>
          </div>
        </div>
        <div v-else class="otheritem flex">
          <!-- 自身ではない -->
          <!--「画像」の指定-->
          <div class="otherimage flex">
            <img :src="image" width="40" height="40" />
            <div class="othername">name</div>
          </div>
          <!--「名前」と「メッセージ」の指定-->
          <div class="otherdetail">
            <div class="othermessage">
              <nl2br tag="div" :text="message" />
            </div>
            <div class="othertime">{{ $dayjs(time).format("hh:mm") }}</div>
          </div>
        </div>
      </section>
    </transition-group>

#追記４

            <div @click.right.prevent="deleteMessage(key)" class="mymessage">
              {{key}}
              <nl2br tag="div" :text="message" />
            </div>

 deleteMessage(key) {
      console.log(key);
      firebase
        .database()
        .ref()
        .remove();
      this.$swal({
        title: "内容確認",
        text: "メッセージを削除しますか？",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$swal("メッセージを削除しました", {
            icon: "success",
          });
          this.$router.go({
            path: `/chat/${this.$route.params.id}`,
            force: true,
          });
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

#追記５

  {
    path: "/chat/:id",
    name: "Chat",
    component: Chat,
    meta: { requiresAuth: true },
  },

   deleteMessage(key) {
      firebase
        .database()
        .ref("${this.$route.params.id}/key")
        .remove();

K_3578

2021/05/14 01:32

なんで何度も言われてるのにマルチポストするのか。見た感じいっつもQiitaに回答付いてないし要らなくない？とは思った。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問