teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追記

2021/05/19 04:21

投稿

TMTN
TMTN

スコア53

title CHANGED
File without changes
body CHANGED
@@ -202,4 +202,8 @@
202
202
  },
203
203
  };
204
204
  </script>
205
- ```
205
+ ```
206
+
207
+ #追記
208
+
209
+ ![イメージ説明](0c095ac806c4820707c1f262096cb8ec.png)

1

内容修正

2021/05/19 04:21

投稿

TMTN
TMTN

スコア53

title CHANGED
@@ -1,1 +1,1 @@
1
- 【Vue x Firestore】v-forを使って取得したkeyを別コンポーネントで取得したい
1
+ 【Vue x Firestore】propsにて取得したkeyを引数とて使いたいです
body CHANGED
@@ -1,11 +1,21 @@
1
- #v-forを使って取得したkeyを別コンポーネントで取得したい
1
+ #propsにて取得したkeyを引数とて使いたいです
2
2
 
3
3
  border.vueにてlist.vueのリストをv-forを使って表示しており、v-for時にkeyを取得しています。
4
4
 
5
5
  list.vueでpropsにてlistデータを取得して表示しているのですが、
6
- そのlistデータにあるkey(list.idとしてます)を使ってdeletePost(id)を発火させてリストの削除を
6
+ そのlistデータにあるkey(list.idとしてます)を使ってdeletePost(list.id)を発火させてリストの削除を
7
7
  実装したいのですが、上手く取得ができない状況です・・
8
8
 
9
+ 試しにpropsで受け取ったkey(list.id)をそのまま{{list.id}}として
10
+ 値を表示させると取得できているのは確認しております。
11
+
12
+ ![list](13310731e0d323d53abb350e51733886.png)
13
+
14
+ その引数をdeletePost(list.id)に渡して削除機能を実装したいのですが、
15
+ deletePost(list.id)とすると弾かれてしまいます・・
16
+
17
+ ![イメージ説明](f7501a9ecc1b3f28f49a904a8fd437bb.png)
18
+
9
19
  分かる方いらっしゃいましたらお力添えをいただきたいです。
10
20
 
11
21
  よろしくお願い致します。
@@ -27,7 +37,7 @@
27
37
  </div>
28
38
  <div class="face face2 flex">
29
39
  <div class="content flex">
30
- <button class="hide-btn" @click="deletePost(id)">×</button>
40
+ <button class="hide-btn" @click="deletePost(list.id)">×</button>
31
41
  <p>{{ list.description }}</p>
32
42
  <router-link :to="`/chat/${list.id}`" class="join-btn flex"
33
43
  >ルームへ参加</router-link
@@ -95,14 +105,14 @@
95
105
  list: this.list,
96
106
  });
97
107
  },
98
- deletePost(id) {
108
+ deletePost(list.id) {
99
109
  // if (this.userid == this.$route.params.uid) {
100
110
  firebase
101
111
  .firestore()
102
112
  .collection("posts")
103
113
  .doc()
104
114
  .delete();
105
- console.log(id);
115
+ console.log(list.id);
106
116
  this.$swal({
107
117
  title: "内容確認",
108
118
  text: "投稿を削除しますか?",