【Vue x Firestore】propsにて取得したkeyを引数として使いたいです

#propsにて取得したkeyを引数として使いたいです

border.vueにてlist.vueのリストをv-forを使って表示しており、v-for時にkeyを取得しています。

list.vueでpropsにてlistデータを取得して表示しているのですが、
そのlistデータにあるkey（list.idとしてます）を使ってdeletePost(list.id)を発火させてリストの削除を
実装したいのですが、上手く取得ができない状況です・・

試しにpropsで受け取ったkey(list.id)をそのまま{{list.id}}として
値を表示させると取得できているのは確認しております。

その引数をdeletePost(list.id)に渡して削除機能を実装したいのですが、
deletePost(list.id)とすると弾かれてしまいます・・

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願い致します。

###list.vue

html
1template>
2  <div class="card">
3    <div class="face face1 flex">
4      <div class="content">
5        <img
6          class="profile-icon"
7          width="50"
8          height="50"
9          src="../assets/アイコン.jpg"
10        />
11        <h3>{{ list.title }}</h3>
12      </div>
13    </div>
14    <div class="face face2 flex">
15      <div class="content flex">
16        <button class="hide-btn" @click="deletePost(list.id)">×</button>
17        <p>{{ list.description }}</p>
18        <router-link :to="`/chat/${list.id}`" class="join-btn flex"
19          >ルームへ参加</router-link
20        >
21        <img
22          src="../assets/ブックマーク.jpg"
23          alt="ブックマーク"
24          class="bookmark-icon"
25          @click="savePost"
26        />
27        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
28      </div>
29    </div>
30  </div>
31</template>

js
1<script>
2import firebase from "firebase";
3import Vue from "vue";
4import VueSwal from "vue-swal";
5Vue.use(VueSwal);
6
7export default {
8  data() {
9    return {
10      userid: "",
11    };
12  },
13  props: {
14    //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す
15    list: {
16      type: Object,
17      //list内にObject型で格納されてる
18    },
19    index: {
20      type: Number,
21      //index内にNumber型で格納されてる
22    },
23  },
24  created() {
25    firebase
26      .firestore()
27      .collection("posts")
28      .doc(this.$route.params.uid)
29      .get()
30      .then((doc) => {
31        if (doc.exists) {
32          this.userid.push(doc.data().uid);
33          console.log(doc.data());
34        }
35      });
36  },
37  methods: {
38    savePost() {
39      firebase
40        .firestore()
41        .collection("users")
42        .doc(this.$route.params.uid)
43        .collection("bookmarks")
44        .doc(this.$route.params.uid)
45        .set({
46          uid: this.$route.params.uid,
47          list: this.list,
48        });
49    },
50    deletePost(list.id) {
51      // if (this.userid == this.$route.params.uid) {
52        firebase
53          .firestore()
54          .collection("posts")
55          .doc()
56          .delete();
57          console.log(list.id);
58        this.$swal({
59          title: "内容確認",
60          text: "投稿を削除しますか？",
61          icon: "warning",
62          buttons: true,
63          dangerMode: true,
64        }).then((willDelete) => {
65          if (willDelete) {
66            this.$swal("投稿を削除しました", {
67              icon: "success",
68            });
69            this.$router.go({
70              path: `/board/${this.$route.params.uid}`,
71              force: true,
72            });
73          } else {
74            this.$swal("キャンセルしました。");
75          }
76        });
77      // }
78    },
79  },
80};
81</script>

#border.vue

<template>
  <div>
    <Header />
    <Post />
    <div class="post">
      <h2 class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items">
          <List
            v-for="(list, index) in allData"
            :index="index"
            :list="list"
            :key="list.id"
          />
          <!--allDataのデータをlist関数とindex関数にそれぞれ格納-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Post from "@/components/post.vue";
import List from "@/components/list.vue";

export default {
  data() {
    return {
      title: "",
      contents: "",
      image: "",
      allData: [],
    };
  },
  components: {
    Header,
    Post,
    List,
  },
  created() {
    // "posts"コレクションの全ドキュメントを取得。
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .limit(16)
      .get()
      .then((snapshot) => {
        //"posts"(参照先)のスナップショットを得る
        snapshot.forEach((doc) => {
          //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
          this.allData.push(doc.data());
          //更にallDataの空箱に格納した"doc"データを格納
        });
      });
  },
};
</script>

#追記

行動規範の内容に同意します

回答2件

ベストアンサー

deletePost(list.id)　と関数宣言されていますが
これだと引数名が「list.id」という使用不可な名前になっていませんか？

引数で受け取らなくてもdeletePostの中でlistはそのまま参照できると思うので「this.list.id」のように使用できないでしょうか。

投稿2021/05/19 04:12

q_sane_q

総合スコア610

TMTN

2021/05/19 04:35

ご回答ありがとうございます。 propsのデータは既に変数に入っているので同じ名前で取得しようとしていたのですね。。 this.list.idとする事で取得することはできました。しかし削除機能が上手くいかずでして・・分かればお伺いしたいのですが、このthis.list.idを元に削除をしたいと考えていたのですが、追記赤部分はthis.list.idで取得できているのですが、青部分を参照しないといけないのでしょうか。。取得方法がわからずでして。。

行動規範の内容に同意します