質問編集履歴

2

追記

2021/05/19 04:21

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -407,3 +407,11 @@
407
407
  </script>
408
408
 
409
409
  ```
410
+
411
+
412
+
413
+ #追記
414
+
415
+
416
+
417
+ ![イメージ説明](0c095ac806c4820707c1f262096cb8ec.png)

1

内容修正

2021/05/19 04:21

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【Vue x Firestore】v-forを使って取得したkeyを別コンポーネントで取得したい
1
+ 【Vue x Firestore】propsにて取得したkeyを引数とて使いたいです
test CHANGED
@@ -1,4 +1,4 @@
1
- #v-forを使って取得したkeyを別コンポーネントで取得したい
1
+ #propsにて取得したkeyを引数とて使いたいです
2
2
 
3
3
 
4
4
 
@@ -8,12 +8,32 @@
8
8
 
9
9
  list.vueでpropsにてlistデータを取得して表示しているのですが、
10
10
 
11
- そのlistデータにあるkey(list.idとしてます)を使ってdeletePost(id)を発火させてリストの削除を
11
+ そのlistデータにあるkey(list.idとしてます)を使ってdeletePost(list.id)を発火させてリストの削除を
12
12
 
13
13
  実装したいのですが、上手く取得ができない状況です・・
14
14
 
15
15
 
16
16
 
17
+ 試しにpropsで受け取ったkey(list.id)をそのまま{{list.id}}として
18
+
19
+ 値を表示させると取得できているのは確認しております。
20
+
21
+
22
+
23
+ ![list](13310731e0d323d53abb350e51733886.png)
24
+
25
+
26
+
27
+ その引数をdeletePost(list.id)に渡して削除機能を実装したいのですが、
28
+
29
+ deletePost(list.id)とすると弾かれてしまいます・・
30
+
31
+
32
+
33
+ ![イメージ説明](f7501a9ecc1b3f28f49a904a8fd437bb.png)
34
+
35
+
36
+
17
37
  分かる方いらっしゃいましたらお力添えをいただきたいです。
18
38
 
19
39
 
@@ -56,7 +76,7 @@
56
76
 
57
77
  <div class="content flex">
58
78
 
59
- <button class="hide-btn" @click="deletePost(id)">×</button>
79
+ <button class="hide-btn" @click="deletePost(list.id)">×</button>
60
80
 
61
81
  <p>{{ list.description }}</p>
62
82
 
@@ -192,7 +212,7 @@
192
212
 
193
213
  },
194
214
 
195
- deletePost(id) {
215
+ deletePost(list.id) {
196
216
 
197
217
  // if (this.userid == this.$route.params.uid) {
198
218
 
@@ -206,7 +226,7 @@
206
226
 
207
227
  .delete();
208
228
 
209
- console.log(id);
229
+ console.log(list.id);
210
230
 
211
231
  this.$swal({
212
232