[vue.js]削除ボタンの実装で、クリック箇所のindexが取得できません。

Question

掲示板アプリを制作しておりまして、削除ボタンの実装に手こずっております。

画面はNuxt.js/Vue.js、バックエンドはFirebaseで制作しております。

削除ボタンを押した際の流れとしては、
クリック
↓
クリックしたdoc()のindex番号取得
↓
Firestore内からその部分を削除

を想定しており、このフローの「クリックしたdoc()のindex番号取得」でつまづいております。

もしよろしければ是非アドバイス頂けますと嬉しいです。

Message.vue

↑ 申し訳ありません、先程までリンクが間違っておりエラーが発生しておりました。
きちんと改善しましたので再度ご覧ください。

宜しくお願い致します。

Answer 1

ご質問拝見いたしました。

「クリックしたdoc()のindex番号取得」をする場合、Message.vue自体をループで作成しているため、
Message.vueをループしているMessageList.vueコンポーネントからindexをpropsで渡してあげれば解消されるのではないでしょうか？

MessageList.vue

<template>
  <div class="message-list">
    <!-- <client-only> -->
    <template v-for="(message, index) in messages">
      <Message
        :key="index"
        :time="message.time"
        :body="message.body"
        :date="message.date"
        :tag="message.tag"
        :i="index" // indexの受け渡し
      />
    </template>
    <!-- </client-only> -->
  </div>
</template>

Message.vue

export default {
  props: {
    time: {
      type: Number,
      required: true
    },
    body: {
      type: String,
      required: true
    },
    date: {
      type: String,
      required: true
    },
    tag: {
      type: Array,
      required: true
    },
    i: {
      type: Number,
      required: true
    }
  },
  methods: {
    async onDelete() {
      try {
        console.log(this.i); // thisでiを取得(MessageListコンポーネントのindexを取得できます。)
        // 以下略
      } catch (error) {
        console.error(error)
      }
    }
  }
}

Comments

[riki01]

お世話になります！
何度も助けて頂きありがとうございます！

無事Twoshiさんのお陰でindex番号を取得することが出来ました！
しかし、削除ボタンの実装までは後もう少しというところで詰まっております。

もし良ければこの後の手順だけ教えて頂いても宜しいでしょうか？
お願い致します。

[riki01]

すみません、再度別でご質問させて頂きます。

[Twoshi]

ご確認いただきありがとうございます！

> もし良ければこの後の手順だけ教えて頂いても宜しいでしょうか？
お伝えしたいのはやまやまなのですが、FirebaseやCloud Firestoreについては知識がなく....申し訳ありません。
riki01様がご対応されたように他のご質問として有識者に回答を仰ぐのが良いと思います。

お力になれず申し訳ありません。今後ともよろしくお願いいたします。

[riki01]

ご返信ありがとうございます！
承知致しました！
再度teratailに投稿しようと思います！

いえいえ、Twoshiさんのおかげでかなり助かっておりますので、Vue.js関連でまた何かわからないことがありましたら是非助けて下さい　笑

ありがとうございました！

[Twoshi]

そう言っていただけるとありがたいです。

おそらく以下のように実装するのだと思いますが、、、ちょろっとURL貼り付けておきます。
ご参考になれば幸いですm(_ _)m
https://qiita.com/zaru/items/45574cf5919441953b2e#%E8%A6%81%E7%B4%A0%E3%81%AE%E5%89%8A%E9%99%A4

[riki01]

ありがとうございます！
参考にいたします！