質問編集履歴

11

内容について分かりにくかった為、整理し修正させて頂きました。

2021/06/20 06:04

投稿

TMTN
TMTN

スコア52

test CHANGED
@@ -1 +1 @@
1
- 【Vue × Firestore】Firestoreのサコレションデータが存在しいなかった場合「保存」、存在したら「削除」と条件分岐させたい
1
+ 【Vue × Firestore】ブマーク機能にて「保存」「削除」と条件に応じて切り替えたい
test CHANGED
@@ -1,10 +1,8 @@
1
- #Firestoreのサコレションデータが存在しいなかった場合「保存」、存在したら「削除」と条件分岐させたい
1
+ #ブマーク機能にて「保存」「削除」と条件に応じて切り替えたい
2
-
3
-
4
-
5
- 現状list.vueにて以下のように左下のボタンを用意して、
2
+
6
-
3
+
4
+
7
- それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
5
+ 現状list.vueにて以下のように左下のボタンを用意して、それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
8
6
 
9
7
 
10
8
 
@@ -12,16 +10,232 @@
12
10
 
13
11
 
14
12
 
15
- Firestoreサブコレクションにデタが存在していなかった場合「保存」、
13
+ #実際
16
-
14
+
15
+
16
+
17
- 存在したら「削除」と条件分岐させて切替をしたいと考えております。
17
+ ####bookmark.vue(親コンポーネント)
18
18
 
19
19
 
20
20
 
21
21
  ```ここに言語を入力
22
22
 
23
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
24
+
25
+ <!-- data内にあるbookmarkList配列から、v-forディレクティブを使って1つずつ要素を取り出し描画。 -->
26
+
27
+ ```
28
+
29
+
30
+
31
+ ```
32
+
33
+ export default {
34
+
35
+ data() {
36
+
37
+ return {
38
+
39
+ profileData: {},
40
+
41
+ paginate: ["paginate-bookmarkList"],
42
+
43
+ bookmarkList: [],
44
+
45
+ currentUserBookmarkIds: [],
46
+
47
+ uid: null
48
+
49
+ };
50
+
51
+ },
52
+
53
+ components: {
54
+
55
+ Header,
56
+
57
+ List
58
+
59
+ },
60
+
61
+
62
+
63
+ created() {
64
+
65
+ firebase
66
+
67
+ .firestore()
68
+
69
+ .collection("users")
70
+
71
+ .doc(this.$route.params.uid)
72
+
73
+ .get()
74
+
75
+ .then(snapshot => {
76
+
77
+ this.profileData = snapshot.data();
78
+
79
+ });
80
+
81
+
82
+
83
+ //各ユーザー(ページ内のユーザー)がブックマークしたリスト
84
+
85
+ firebase
86
+
87
+ .firestore()
88
+
89
+ .collection("users")
90
+
91
+ .doc(this.$route.params.uid)
92
+
93
+ .collection("bookmarks")
94
+
95
+ .orderBy("time", "desc")
96
+
97
+ .get()
98
+
99
+ .then(snapshot => {
100
+
101
+ snapshot.forEach(doc => {
102
+
103
+ this.bookmarkList.push(doc.data());
104
+
105
+ });
106
+
107
+ });
108
+
109
+
110
+
111
+ //ログイン中ユーザーがブックマークしたリスト
112
+
113
+ firebase.auth().onAuthStateChanged(user => {
114
+
115
+ const uid = user.uid;
116
+
117
+ firebase
118
+
119
+ .firestore()
120
+
121
+ .collection("users") //「users」コレクションを参照
122
+
123
+ .doc(uid) //ログイン中のユーザーを参照
124
+
125
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
126
+
127
+ .get()
128
+
129
+ .then(snapshot => {
130
+
131
+ snapshot.forEach(doc => {
132
+
133
+ //forEachで全てのドキュメントに対して
134
+
135
+ this.currentUserBookmarkIds.push(doc.data().postId);
136
+
137
+ //「postId」を追加し、this.currentUserBookmarkIdsへ格納
138
+
139
+ });
140
+
141
+ });
142
+
143
+ firebase
144
+
145
+ .firestore()
146
+
147
+ .collection("posts") //「posts」コレクションを参照
148
+
149
+ .get()
150
+
151
+ .then(snapshot => {
152
+
153
+ snapshot.forEach(doc => {
154
+
155
+ //forEachで全てのドキュメントに対して
156
+
157
+ if (this.currentUserBookmarkIds.includes(doc.data().id)) {
158
+
159
+ //this.currentUserBookmarkIdsに「id」が含まれていたら、
160
+
161
+ this.bookmarkList.push({
162
+
163
+ ...doc.data(),
164
+
165
+ isBookmarked: true
166
+
167
+ });
168
+
169
+ console.log(this.bookmarkList);
170
+
171
+ //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
172
+
173
+ }
174
+
175
+ });
176
+
177
+ });
178
+
179
+ });
180
+
181
+ }
182
+
183
+ };
184
+
185
+ ```
186
+
187
+
188
+
189
+ ####list.vue(子コンポーネント)
190
+
191
+
192
+
193
+ ```ここに言語を入力
194
+
195
+ <template>
196
+
197
+ <div class="list">
198
+
199
+ <div class="face face1 flex">
200
+
201
+ <div class="content">
202
+
23
203
  <img
24
204
 
205
+ class="profile-icon"
206
+
207
+ width="50"
208
+
209
+ height="50"
210
+
211
+ :src="
212
+
213
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
214
+
215
+ "
216
+
217
+ />
218
+
219
+ <h3>{{ list.title }}</h3>
220
+
221
+ </div>
222
+
223
+ </div>
224
+
225
+ <div class="face face2 flex">
226
+
227
+ <div class="content flex">
228
+
229
+ <button class="hide-btn" @click="deletePost">×</button>
230
+
231
+ <p>{{ list.description }}</p>
232
+
233
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
234
+
235
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
236
+
237
+ <img
238
+
25
239
  src="../assets/ブックマーク保存.jpg"
26
240
 
27
241
  alt="ブックマーク"
@@ -30,7 +244,7 @@
30
244
 
31
245
  @click="saveBookmark"
32
246
 
33
- v-if="hasBookmark(list)"
247
+                     v-if="hasBookmark(list)"
34
248
 
35
249
  />
36
250
 
@@ -44,664 +258,472 @@
44
258
 
45
259
  @click="deleteBookmark"
46
260
 
47
- v-else
261
+                     v-else
48
262
 
49
263
  />
50
264
 
265
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
266
+
267
+ </div>
268
+
269
+ </div>
270
+
271
+ </div>
272
+
273
+ </template>
274
+
51
- ```
275
+ ```
276
+
277
+
278
+
52
-
279
+ ```
280
+
53
-
281
+ export default {
282
+
54
-
283
+ data() {
284
+
285
+ return {
286
+
287
+ bookmarkId: "",
288
+
289
+ userDatas: [],
290
+
291
+ preview: require("../assets/デフォルト画像.jpg")
292
+
293
+ };
294
+
295
+ },
296
+
297
+ props: {
298
+
299
+ list: {
300
+
301
+ type: Object
302
+
303
+ },
304
+
305
+ index: {
306
+
307
+ type: Number
308
+
309
+ },
310
+
311
+ },
312
+
313
+
314
+
315
+ methods: {
316
+
317
+
318
+
319
+ ~ 省略 ~
320
+
321
+
322
+
323
+ hasBookmark(book) {
324
+
325
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
326
+
327
+ return this.bookmark.some(value => value.id === book.id);
328
+
329
+ },
330
+
331
+
332
+
333
+ saveBookmark() {
334
+
335
+ const id = firebase
336
+
337
+ .firestore()
338
+
339
+ .collection("users")
340
+
341
+ .doc(this.$route.params.uid)
342
+
343
+ .collection("bookmarks")
344
+
345
+ .doc().id;
346
+
347
+
348
+
349
+ firebase
350
+
351
+ .firestore()
352
+
353
+ .collection("users") //「users」コレクションを参照
354
+
355
+ .doc(this.$route.params.uid) //対象ページのユーザーを参照
356
+
357
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
358
+
359
+ .doc(id) //自動生成されたドキュメントIDを参照
360
+
361
+ .set(
362
+
363
+ {
364
+
365
+ postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
366
+
367
+ time: firebase.firestore.FieldValue.serverTimestamp()
368
+
369
+ }
370
+
371
+ )
372
+
373
+ .then(() => {
374
+
375
+ this.$swal("ブックマークに追加しました。", {
376
+
377
+ icon: "success"
378
+
379
+ });
380
+
381
+ })
382
+
383
+ .catch(() => {
384
+
385
+ this.$swal("ブックマークを追加出来ません。", {
386
+
387
+ icon: "error"
388
+
389
+ });
390
+
391
+ });
392
+
393
+ },
394
+
395
+
396
+
397
+ deleteBookmark() {
398
+
399
+ firebase
400
+
401
+ .firestore()
402
+
403
+ .collection("users")
404
+
405
+ .doc(this.$route.params.uid)
406
+
407
+ .collection("bookmarks")
408
+
409
+ .doc(this.list.postId)
410
+
411
+ .delete()
412
+
413
+ .then(() => {
414
+
415
+ this.$swal("ブックマークを取り消ししました。", {
416
+
417
+ icon: "success"
418
+
419
+ });
420
+
421
+ this.$router.go({
422
+
423
+ path: `/bookmark/${this.$route.params.uid}`,
424
+
425
+ force: true
426
+
427
+ });
428
+
429
+ })
430
+
431
+ .catch(() => {
432
+
433
+ this.$swal("ブックマークを取り消し出来ません。", {
434
+
435
+ icon: "error"
436
+
437
+ });
438
+
439
+ });
440
+
441
+ },
442
+
443
+ ```
444
+
445
+
446
+
447
+ #追記 「内容整理」
448
+
449
+
450
+
451
+ ####⑴bookmark.vueにてブックマークされた一覧を表示する際について。
452
+
453
+ ブックマーク保存(savebookmark)する際、投稿(list)のidをサブコレクションのbookmarksへ「postId」としてデータを保存してあげて、
454
+
455
+ そのブックマークされた際に取得した「postId」と投稿時に取得する「id」が一致されたものをブックマーク一覧に表示させています。
456
+
457
+
458
+
459
+ ◆投稿時に取得する「id」
460
+
461
+ ![イメージ説明](ccfba015b2223bc75c2e0baa1020a848.png)
462
+
463
+ ◆ブックマークされた際に取得した「postId」
464
+
465
+ ![イメージ説明](484ed44e7f65e7bc574f63861d5f6d11.png)
466
+
467
+
468
+
469
+ しかし、以下2点でthis.bookmarkListに追加しているからなのか、一つの投稿をブックマークすると2つの投稿が表示されてしまいます。
470
+
471
+
472
+
473
+ ####各ユーザー(ページ内のユーザー)がブックマークしたリスト
474
+
475
+ ```ここに言語を入力
476
+
477
+
478
+
479
+ firebase
480
+
481
+ .firestore()
482
+
483
+ .collection("users")
484
+
485
+ .doc(this.$route.params.uid)
486
+
487
+ .collection("bookmarks")
488
+
489
+ .orderBy("time", "desc")
490
+
491
+ .get()
492
+
493
+ .then(snapshot => {
494
+
495
+ snapshot.forEach(doc => {
496
+
497
+ this.bookmarkList.push(doc.data());
498
+
499
+ });
500
+
501
+ });
502
+
503
+ ```
504
+
505
+
506
+
55
- 分かる方いらっゃいましらお力添えを頂きたいです。
507
+ ####ログイン中ユーザーがブックマークしたリスト
508
+
509
+ ```
510
+
511
+ firebase.auth().onAuthStateChanged(user => {
512
+
513
+ const uid = user.uid;
514
+
515
+ firebase
516
+
517
+ .firestore()
518
+
519
+ .collection("users") //「users」コレクションを参照
520
+
521
+ .doc(uid) //ログイン中のユーザーを参照
522
+
523
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
524
+
525
+ .get()
526
+
527
+ .then(snapshot => {
528
+
529
+ snapshot.forEach(doc => {
530
+
531
+ //forEachで全てのドキュメントに対して
532
+
533
+ this.currentUserBookmarkIds.push(doc.data().postId);
534
+
535
+ //「postId」を追加し、this.currentUserBookmarkIdsへ格納
536
+
537
+ });
538
+
539
+ });
540
+
541
+ firebase
542
+
543
+ .firestore()
544
+
545
+ .collection("posts") //「posts」コレクションを参照
546
+
547
+ .get()
548
+
549
+ .then(snapshot => {
550
+
551
+ snapshot.forEach(doc => {
552
+
553
+ //forEachで全てのドキュメントに対して
554
+
555
+ if (this.currentUserBookmarkIds.includes(doc.data().id)) {
556
+
557
+ //this.currentUserBookmarkIdsに「id」が含まれていたら、
558
+
559
+ this.bookmarkList.push({
560
+
561
+ ...doc.data(),
562
+
563
+ isBookmarked: true
564
+
565
+ });
566
+
567
+ console.log(this.bookmarkList);
568
+
569
+ //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
570
+
571
+ }
572
+
573
+ });
574
+
575
+ });
576
+
577
+ });
578
+
579
+ }
580
+
581
+ ```
582
+
583
+
584
+
585
+ 単純に「各ユーザー(ページ内のユーザー)がブックマークしたリスト」を消したらいいのかと思ったのですが、消すと他のユーザーのブックマーク一覧を閲覧した際にそのユーザーのブックマーク一覧を表示するのではなく、ログイン中のユーザーのブックマーク一覧を表示してしまいます・・
586
+
587
+
588
+
589
+ 他のユーザーのブックマークを閲覧した際にはそのユーザーのブックマーク一覧を表示して、被らずに1枚のみを表示したいです。
590
+
591
+
592
+
593
+ ![イメージ説明](9ee0181a687deb820e6711a1b3f137e4.png)
594
+
595
+
596
+
597
+
598
+
599
+ #⑵投稿の中にisBookmarkedとしてブックマークされている投稿かどうかが判定したい。
600
+
601
+
602
+
603
+ ※以下赤で囲っている箇所参照
604
+
605
+
606
+
607
+ ![イメージ説明](9ee0181a687deb820e6711a1b3f137e4.png)
608
+
609
+
610
+
611
+ ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を一緒に渡してあげているので、listコンポーネント側で、isBookmarkedがtrue,かfalseかで表示を変えてあげようと考えておりますが、以下について悩んでおります。
612
+
613
+
614
+
615
+ propsで子コンポーネントであるlist.vueにデータを渡し、「isBookmarked」がtrue,かfalseか確認すればよろしいのでしょうか。
616
+
617
+ もしくはFirestore内に「isBookmarked」を保存してあげたほうがよいのでしょうか。
618
+
619
+
620
+
621
+ またlist.vue側でどのように「isBookmarked」がtrue,かfalseか判定してあげたらよいのか分からない状況です・・
622
+
623
+
624
+
625
+ #⑶board.vue「投稿一覧」からでもブックマークの「保存」と「削除」を行えるようにしたい
626
+
627
+
628
+
629
+ board.vueコンポーネントでも同様に、ログインしているユーザーのブックマーク一覧から、それに紐づいたpostIdを持つ投稿を取り出してきて、それにisBookmarkedをつけてあげてboard.vue側でもブックマークの保存と削除を行えるようにしたいと考えております。
630
+
631
+
632
+
633
+ ```ここに言語を入力
634
+
635
+ export default {
636
+
637
+ data() {
638
+
639
+ return {
640
+
641
+ currentUserBookmarkIds: [],
642
+
643
+ uid: null
644
+
645
+ };
646
+
647
+ },
648
+
649
+
650
+
651
+ //各ユーザーがブックマークしたリスト
652
+
653
+
654
+
655
+ firebase
656
+
657
+ .firestore()
658
+
659
+ .collection("users") //「users」コレクションを参照
660
+
661
+ .doc(this.$route.params.uid) //現在表示中ユーザーを参照
662
+
663
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
664
+
665
+ .get()
666
+
667
+ .then(snapshot => {
668
+
669
+ snapshot.forEach(doc => {
670
+
671
+ //forEachで全てのドキュメントに対して
672
+
673
+ this.currentUserBookmarkIds.push(doc.data().postId);
674
+
675
+ //「postId」を追加し、this.currentUserBookmarkIdsへ格納
676
+
677
+ });
678
+
679
+ });
680
+
681
+ firebase
682
+
683
+ .firestore()
684
+
685
+ .collection("posts") //「posts」コレクションを参照
686
+
687
+ .orderBy("time", "desc")
688
+
689
+ .get()
690
+
691
+ .then(snapshot => {
692
+
693
+ snapshot.forEach(doc => {
694
+
695
+ //forEachで全てのドキュメントに対して
696
+
697
+ if (this.currentUserBookmarkIds.includes(doc.data().id)) {
698
+
699
+ //this.currentUserBookmarkIdsに「id」が含まれていたら、
700
+
701
+ this.postData.push({
702
+
703
+ isBookmarked: true
704
+
705
+ });
706
+
707
+ //isBookmarkedを追加。
708
+
709
+ }
710
+
711
+ });
712
+
713
+ });
714
+
715
+ }
716
+
717
+ ```
718
+
719
+
720
+
721
+ 以上bookmark.vueと同様の方法でisBookmarked: trueをpushしてあげようと考えていますが、こちらにつきましても⑵同様にpropsでデータを渡すかFirestore内に保存してあげたらよいのか悩んでいる状況です。
722
+
723
+
724
+
725
+ ご教示頂けると幸いです。。
56
726
 
57
727
 
58
728
 
59
729
  よろしくお願いいたします。
60
-
61
-
62
-
63
- #内容変更
64
-
65
-
66
-
67
- ####bookmark.vue(親コンポーネント)
68
-
69
-
70
-
71
- ```ここに言語を入力
72
-
73
- <template>
74
-
75
- <div>
76
-
77
- <Header />
78
-
79
- <div class="bookmarkList flex">
80
-
81
- <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
82
-
83
- <hr class="separate" />
84
-
85
- <div class="bookmarkList-posts">
86
-
87
- <paginate
88
-
89
- name="paginate-bookmarkList"
90
-
91
- tag="ol"
92
-
93
- :list="bookmarkList"
94
-
95
- :per="12"
96
-
97
- v-if="bookmarkList.length !== 0"
98
-
99
- >
100
-
101
- <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
102
-
103
- <!-- data内にあるbookmarkList配列から、v-forディレクティブを使って1つずつ要素を取り出し描画。 -->
104
-
105
- </paginate>
106
-
107
- <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
108
-
109
- <paginate-links
110
-
111
- for="paginate-bookmarkList"
112
-
113
- name="paginate-bookmarkList"
114
-
115
- :async="true"
116
-
117
- class="pagination flex"
118
-
119
- :show-step-links="true"
120
-
121
- :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
122
-
123
- ></paginate-links>
124
-
125
- </div>
126
-
127
- </div>
128
-
129
- </div>
130
-
131
- </template>
132
-
133
- ```
134
-
135
-
136
-
137
- ```
138
-
139
- export default {
140
-
141
- data() {
142
-
143
- return {
144
-
145
- profileData: {},
146
-
147
- paginate: ["paginate-bookmarkList"],
148
-
149
- bookmarkList: [],
150
-
151
- currentUserBookmarkIds: [],
152
-
153
- uid: null
154
-
155
- };
156
-
157
- },
158
-
159
- components: {
160
-
161
- Header,
162
-
163
- List
164
-
165
- },
166
-
167
-
168
-
169
- created() {
170
-
171
- firebase
172
-
173
- .firestore()
174
-
175
- .collection("users")
176
-
177
- .doc(this.$route.params.uid)
178
-
179
- .get()
180
-
181
- .then(snapshot => {
182
-
183
- this.profileData = snapshot.data();
184
-
185
- });
186
-
187
-
188
-
189
- //各ユーザー(ページ内のユーザー)がブックマークしたリスト
190
-
191
- firebase
192
-
193
- .firestore()
194
-
195
- .collection("users")
196
-
197
- .doc(this.$route.params.uid)
198
-
199
- .collection("bookmarks")
200
-
201
- .orderBy("time", "desc")
202
-
203
- .get()
204
-
205
- .then(snapshot => {
206
-
207
- snapshot.forEach(doc => {
208
-
209
- this.bookmarkList.push(doc.data());
210
-
211
- });
212
-
213
- });
214
-
215
-
216
-
217
- //ログイン中ユーザーがブックマークしたリスト
218
-
219
- firebase.auth().onAuthStateChanged(user => {
220
-
221
- const uid = user.uid;
222
-
223
- firebase
224
-
225
- .firestore()
226
-
227
- .collection("users") //「users」コレクションを参照
228
-
229
- .doc(uid) //ログイン中のユーザーを参照
230
-
231
- .collection("bookmarks") //「bookmarks」サブコレクションを参照
232
-
233
- .get()
234
-
235
- .then(snapshot => {
236
-
237
- snapshot.forEach(doc => {
238
-
239
- //forEachで全てのドキュメントに対して
240
-
241
- this.currentUserBookmarkIds.push(doc.data().postId);
242
-
243
- //「postId」を追加し、this.currentUserBookmarkIdsへ格納
244
-
245
- });
246
-
247
- });
248
-
249
- firebase
250
-
251
- .firestore()
252
-
253
- .collection("posts") //「posts」コレクションを参照
254
-
255
- .get()
256
-
257
- .then(snapshot => {
258
-
259
- snapshot.forEach(doc => {
260
-
261
- //forEachで全てのドキュメントに対して
262
-
263
- if (this.currentUserBookmarkIds.includes(doc.data().id)) {
264
-
265
- //this.currentUserBookmarkIdsに「id」が含まれていたら、
266
-
267
- this.bookmarkList.push({
268
-
269
- ...doc.data(),
270
-
271
- isBookmarked: true
272
-
273
- });
274
-
275
- console.log(this.bookmarkList);
276
-
277
- //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
278
-
279
- }
280
-
281
- });
282
-
283
- });
284
-
285
- });
286
-
287
- }
288
-
289
- };
290
-
291
- ```
292
-
293
-
294
-
295
- ####list.vue(子コンポーネント)
296
-
297
-
298
-
299
- ```ここに言語を入力
300
-
301
- <template>
302
-
303
- <div class="list">
304
-
305
- <div class="face face1 flex">
306
-
307
- <div class="content">
308
-
309
- <img
310
-
311
- class="profile-icon"
312
-
313
- width="50"
314
-
315
- height="50"
316
-
317
- :src="
318
-
319
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
320
-
321
- "
322
-
323
- />
324
-
325
- <h3>{{ list.title }}</h3>
326
-
327
- </div>
328
-
329
- </div>
330
-
331
- <div class="face face2 flex">
332
-
333
- <div class="content flex">
334
-
335
- <button class="hide-btn" @click="deletePost">×</button>
336
-
337
- <p>{{ list.description }}</p>
338
-
339
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
340
-
341
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
342
-
343
- <img
344
-
345
- src="../assets/ブックマーク保存.jpg"
346
-
347
- alt="ブックマーク"
348
-
349
- class="bookmark-icon"
350
-
351
- @click="saveBookmark"
352
-
353
-                     v-if="hasBookmark(list)"
354
-
355
- />
356
-
357
- <img
358
-
359
- src="../assets/ブックマーク未保存.jpg"
360
-
361
- alt="ブックマーク"
362
-
363
- class="bookmark-icon"
364
-
365
- @click="deleteBookmark"
366
-
367
-                     v-else
368
-
369
- />
370
-
371
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
372
-
373
- </div>
374
-
375
- </div>
376
-
377
- </div>
378
-
379
- </template>
380
-
381
- ```
382
-
383
-
384
-
385
- ```
386
-
387
- export default {
388
-
389
- data() {
390
-
391
- return {
392
-
393
- bookmarkId: "",
394
-
395
- userDatas: [],
396
-
397
- preview: require("../assets/デフォルト画像.jpg")
398
-
399
- };
400
-
401
- },
402
-
403
- props: {
404
-
405
- list: {
406
-
407
- type: Object
408
-
409
- },
410
-
411
- index: {
412
-
413
- type: Number
414
-
415
- },
416
-
417
- },
418
-
419
-
420
-
421
- methods: {
422
-
423
-
424
-
425
- ~ 省略 ~
426
-
427
-
428
-
429
- hasBookmark(book) {
430
-
431
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
432
-
433
- return this.bookmark.some(value => value.id === book.id);
434
-
435
- },
436
-
437
-
438
-
439
- saveBookmark() {
440
-
441
- const id = firebase
442
-
443
- .firestore()
444
-
445
- .collection("users")
446
-
447
- .doc(this.$route.params.uid)
448
-
449
- .collection("bookmarks")
450
-
451
- .doc().id;
452
-
453
-
454
-
455
- firebase
456
-
457
- .firestore()
458
-
459
- .collection("users") //「users」コレクションを参照
460
-
461
- .doc(this.$route.params.uid) //対象ページのユーザーを参照
462
-
463
- .collection("bookmarks") //「bookmarks」サブコレクションを参照
464
-
465
- .doc(id) //自動生成されたドキュメントIDを参照
466
-
467
- .set(
468
-
469
- {
470
-
471
- postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
472
-
473
- time: firebase.firestore.FieldValue.serverTimestamp()
474
-
475
- }
476
-
477
- )
478
-
479
- .then(() => {
480
-
481
- this.$swal("ブックマークに追加しました。", {
482
-
483
- icon: "success"
484
-
485
- });
486
-
487
- })
488
-
489
- .catch(() => {
490
-
491
- this.$swal("ブックマークを追加出来ません。", {
492
-
493
- icon: "error"
494
-
495
- });
496
-
497
- });
498
-
499
- },
500
-
501
-
502
-
503
- deleteBookmark() {
504
-
505
- firebase
506
-
507
- .firestore()
508
-
509
- .collection("users")
510
-
511
- .doc(this.$route.params.uid)
512
-
513
- .collection("bookmarks")
514
-
515
- .doc(this.list.postId)
516
-
517
- .delete()
518
-
519
- .then(() => {
520
-
521
- this.$swal("ブックマークを取り消ししました。", {
522
-
523
- icon: "success"
524
-
525
- });
526
-
527
- this.$router.go({
528
-
529
- path: `/bookmark/${this.$route.params.uid}`,
530
-
531
- force: true
532
-
533
- });
534
-
535
- })
536
-
537
- .catch(() => {
538
-
539
- this.$swal("ブックマークを取り消し出来ません。", {
540
-
541
- icon: "error"
542
-
543
- });
544
-
545
- });
546
-
547
- },
548
-
549
- ```
550
-
551
-
552
-
553
- #追記 「Firestoreのデータ構造を変更しました。」が、わからない点がいくつかある状況です。。
554
-
555
-
556
-
557
- ⑴ブックマーク表示について、ブックマーク保存(savebookmark)する際に、投稿(list)のidをサブコレクションのbookmarksへ「postId」としてデータを保存してあげて、そのブックマークされたidである「postId」と投稿のidである「list.id」が一致されたものをブックマーク一覧に表示させています。
558
-
559
-
560
-
561
- ![イメージ説明](9ee0181a687deb820e6711a1b3f137e4.png)
562
-
563
-
564
-
565
- しかし、以下2点でthis.bookmarkListに追加しているからなのか、一つの投稿をブックマークすると2つの投稿が表示されてしまいます。
566
-
567
-
568
-
569
- 単純に「各ユーザー(ページ内のユーザー)がブックマークしたリスト」を消したらいいのかと思ったのですが、消すと他のユーザーのブックマーク一覧を閲覧した際にそのユーザーのブックマーク一覧を表示するのではなく、ログイン中のユーザーのブックマーク一覧を表示してしまいます・・
570
-
571
-
572
-
573
- 他のユーザーのブックマークを閲覧した際にはそのユーザーのブックマーク一覧を表示して、1枚のみを表示したいです。
574
-
575
-
576
-
577
- ####各ユーザー(ページ内のユーザー)がブックマークしたリスト
578
-
579
- ```ここに言語を入力
580
-
581
-
582
-
583
- firebase
584
-
585
- .firestore()
586
-
587
- .collection("users")
588
-
589
- .doc(this.$route.params.uid)
590
-
591
- .collection("bookmarks")
592
-
593
- .orderBy("time", "desc")
594
-
595
- .get()
596
-
597
- .then(snapshot => {
598
-
599
- snapshot.forEach(doc => {
600
-
601
- this.bookmarkList.push(doc.data());
602
-
603
- });
604
-
605
- });
606
-
607
- ```
608
-
609
-
610
-
611
- ####ログイン中ユーザーがブックマークしたリスト
612
-
613
- ```
614
-
615
- firebase.auth().onAuthStateChanged(user => {
616
-
617
- const uid = user.uid;
618
-
619
- firebase
620
-
621
- .firestore()
622
-
623
- .collection("users") //「users」コレクションを参照
624
-
625
- .doc(uid) //ログイン中のユーザーを参照
626
-
627
- .collection("bookmarks") //「bookmarks」サブコレクションを参照
628
-
629
- .get()
630
-
631
- .then(snapshot => {
632
-
633
- snapshot.forEach(doc => {
634
-
635
- //forEachで全てのドキュメントに対して
636
-
637
- this.currentUserBookmarkIds.push(doc.data().postId);
638
-
639
- //「postId」を追加し、this.currentUserBookmarkIdsへ格納
640
-
641
- });
642
-
643
- });
644
-
645
- firebase
646
-
647
- .firestore()
648
-
649
- .collection("posts") //「posts」コレクションを参照
650
-
651
- .get()
652
-
653
- .then(snapshot => {
654
-
655
- snapshot.forEach(doc => {
656
-
657
- //forEachで全てのドキュメントに対して
658
-
659
- if (this.currentUserBookmarkIds.includes(doc.data().id)) {
660
-
661
- //this.currentUserBookmarkIdsに「id」が含まれていたら、
662
-
663
- this.bookmarkList.push({
664
-
665
- ...doc.data(),
666
-
667
- isBookmarked: true
668
-
669
- });
670
-
671
- console.log(this.bookmarkList);
672
-
673
- //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
674
-
675
- }
676
-
677
- });
678
-
679
- });
680
-
681
- });
682
-
683
- }
684
-
685
- ```
686
-
687
-
688
-
689
-
690
-
691
- ⑵listの中にisBookmarkedとしてブックマークされている投稿かどうかが判定できる情報を一緒に渡してあげ、listコンポーネント側で、isBookmarkedがtrue,かfalseかで表示を変えてあげようと考えておりますが、こちらにつきましても実装したいのですがわからず行き詰まっている状況です・・
692
-
693
-
694
-
695
- ⑶board.vueコンポーネントでも同様に、ログインしているユーザーのブックマーク一覧から、それに紐づいたpostIdを持つ投稿を取り出してきて、それにisBookmarkedをつけてあげてboard.vue側でもブックマークの保存と削除を行えるようにしたいと考えております。
696
-
697
-
698
-
699
- 上記データ構造から少し複雑であると指摘がありましたので変更しております・・・が、分からず行き詰まってしまっている状況です。。
700
-
701
-
702
-
703
- ご教示頂けると幸いです。。
704
-
705
-
706
-
707
- よろしくお願いいたします。

10

内容変更

2021/06/20 06:04

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -88,8 +88,6 @@
88
88
 
89
89
  name="paginate-bookmarkList"
90
90
 
91
- class="paginate-pctb"
92
-
93
91
  tag="ol"
94
92
 
95
93
  :list="bookmarkList"
@@ -102,7 +100,7 @@
102
100
 
103
101
  <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
104
102
 
105
- <!-- data内のcurrentUserBookmarkList:[]をbindしてpropsでータ渡す -->
103
+ <!-- data内にあるbookmarkList配列から、v-forディレクティブ使って1つずつ要素を取り出し描画。 -->
106
104
 
107
105
  </paginate>
108
106
 
@@ -116,7 +114,7 @@
116
114
 
117
115
  :async="true"
118
116
 
119
- class="pagination paginate-pctb flex"
117
+ class="pagination flex"
120
118
 
121
119
  :show-step-links="true"
122
120
 
@@ -150,7 +148,7 @@
150
148
 
151
149
  bookmarkList: [],
152
150
 
153
- currentUserBookmarkList: [],
151
+ currentUserBookmarkIds: [],
154
152
 
155
153
  uid: null
156
154
 
@@ -226,19 +224,419 @@
226
224
 
227
225
  .firestore()
228
226
 
227
+ .collection("users") //「users」コレクションを参照
228
+
229
+ .doc(uid) //ログイン中のユーザーを参照
230
+
231
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
232
+
233
+ .get()
234
+
235
+ .then(snapshot => {
236
+
237
+ snapshot.forEach(doc => {
238
+
239
+ //forEachで全てのドキュメントに対して
240
+
241
+ this.currentUserBookmarkIds.push(doc.data().postId);
242
+
243
+ //「postId」を追加し、this.currentUserBookmarkIdsへ格納
244
+
245
+ });
246
+
247
+ });
248
+
249
+ firebase
250
+
251
+ .firestore()
252
+
253
+ .collection("posts") //「posts」コレクションを参照
254
+
255
+ .get()
256
+
257
+ .then(snapshot => {
258
+
259
+ snapshot.forEach(doc => {
260
+
261
+ //forEachで全てのドキュメントに対して
262
+
263
+ if (this.currentUserBookmarkIds.includes(doc.data().id)) {
264
+
265
+ //this.currentUserBookmarkIdsに「id」が含まれていたら、
266
+
267
+ this.bookmarkList.push({
268
+
269
+ ...doc.data(),
270
+
271
+ isBookmarked: true
272
+
273
+ });
274
+
275
+ console.log(this.bookmarkList);
276
+
277
+ //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
278
+
279
+ }
280
+
281
+ });
282
+
283
+ });
284
+
285
+ });
286
+
287
+ }
288
+
289
+ };
290
+
291
+ ```
292
+
293
+
294
+
295
+ ####list.vue(子コンポーネント)
296
+
297
+
298
+
299
+ ```ここに言語を入力
300
+
301
+ <template>
302
+
303
+ <div class="list">
304
+
305
+ <div class="face face1 flex">
306
+
307
+ <div class="content">
308
+
309
+ <img
310
+
311
+ class="profile-icon"
312
+
313
+ width="50"
314
+
315
+ height="50"
316
+
317
+ :src="
318
+
319
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
320
+
321
+ "
322
+
323
+ />
324
+
325
+ <h3>{{ list.title }}</h3>
326
+
327
+ </div>
328
+
329
+ </div>
330
+
331
+ <div class="face face2 flex">
332
+
333
+ <div class="content flex">
334
+
335
+ <button class="hide-btn" @click="deletePost">×</button>
336
+
337
+ <p>{{ list.description }}</p>
338
+
339
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
340
+
341
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
342
+
343
+ <img
344
+
345
+ src="../assets/ブックマーク保存.jpg"
346
+
347
+ alt="ブックマーク"
348
+
349
+ class="bookmark-icon"
350
+
351
+ @click="saveBookmark"
352
+
353
+                     v-if="hasBookmark(list)"
354
+
355
+ />
356
+
357
+ <img
358
+
359
+ src="../assets/ブックマーク未保存.jpg"
360
+
361
+ alt="ブックマーク"
362
+
363
+ class="bookmark-icon"
364
+
365
+ @click="deleteBookmark"
366
+
367
+                     v-else
368
+
369
+ />
370
+
371
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
372
+
373
+ </div>
374
+
375
+ </div>
376
+
377
+ </div>
378
+
379
+ </template>
380
+
381
+ ```
382
+
383
+
384
+
385
+ ```
386
+
387
+ export default {
388
+
389
+ data() {
390
+
391
+ return {
392
+
393
+ bookmarkId: "",
394
+
395
+ userDatas: [],
396
+
397
+ preview: require("../assets/デフォルト画像.jpg")
398
+
399
+ };
400
+
401
+ },
402
+
403
+ props: {
404
+
405
+ list: {
406
+
407
+ type: Object
408
+
409
+ },
410
+
411
+ index: {
412
+
413
+ type: Number
414
+
415
+ },
416
+
417
+ },
418
+
419
+
420
+
421
+ methods: {
422
+
423
+
424
+
425
+ ~ 省略 ~
426
+
427
+
428
+
429
+ hasBookmark(book) {
430
+
431
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
432
+
433
+ return this.bookmark.some(value => value.id === book.id);
434
+
435
+ },
436
+
437
+
438
+
439
+ saveBookmark() {
440
+
441
+ const id = firebase
442
+
443
+ .firestore()
444
+
229
445
  .collection("users")
230
446
 
231
- .doc(uid)
447
+ .doc(this.$route.params.uid)
232
448
 
233
449
  .collection("bookmarks")
234
450
 
451
+ .doc().id;
452
+
453
+
454
+
455
+ firebase
456
+
457
+ .firestore()
458
+
459
+ .collection("users") //「users」コレクションを参照
460
+
461
+ .doc(this.$route.params.uid) //対象ページのユーザーを参照
462
+
463
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
464
+
465
+ .doc(id) //自動生成されたドキュメントIDを参照
466
+
467
+ .set(
468
+
469
+ {
470
+
471
+ postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
472
+
473
+ time: firebase.firestore.FieldValue.serverTimestamp()
474
+
475
+ }
476
+
477
+ )
478
+
479
+ .then(() => {
480
+
481
+ this.$swal("ブックマークに追加しました。", {
482
+
483
+ icon: "success"
484
+
485
+ });
486
+
487
+ })
488
+
489
+ .catch(() => {
490
+
491
+ this.$swal("ブックマークを追加出来ません。", {
492
+
493
+ icon: "error"
494
+
495
+ });
496
+
497
+ });
498
+
499
+ },
500
+
501
+
502
+
503
+ deleteBookmark() {
504
+
505
+ firebase
506
+
507
+ .firestore()
508
+
509
+ .collection("users")
510
+
511
+ .doc(this.$route.params.uid)
512
+
513
+ .collection("bookmarks")
514
+
515
+ .doc(this.list.postId)
516
+
517
+ .delete()
518
+
519
+ .then(() => {
520
+
521
+ this.$swal("ブックマークを取り消ししました。", {
522
+
523
+ icon: "success"
524
+
525
+ });
526
+
527
+ this.$router.go({
528
+
529
+ path: `/bookmark/${this.$route.params.uid}`,
530
+
531
+ force: true
532
+
533
+ });
534
+
535
+ })
536
+
537
+ .catch(() => {
538
+
539
+ this.$swal("ブックマークを取り消し出来ません。", {
540
+
541
+ icon: "error"
542
+
543
+ });
544
+
545
+ });
546
+
547
+ },
548
+
549
+ ```
550
+
551
+
552
+
553
+ #追記 「Firestoreのデータ構造を変更しました。」が、わからない点がいくつかある状況です。。
554
+
555
+
556
+
557
+ ⑴ブックマーク表示について、ブックマーク保存(savebookmark)する際に、投稿(list)のidをサブコレクションのbookmarksへ「postId」としてデータを保存してあげて、そのブックマークされたidである「postId」と投稿のidである「list.id」が一致されたものをブックマーク一覧に表示させています。
558
+
559
+
560
+
561
+ ![イメージ説明](9ee0181a687deb820e6711a1b3f137e4.png)
562
+
563
+
564
+
565
+ しかし、以下2点でthis.bookmarkListに追加しているからなのか、一つの投稿をブックマークすると2つの投稿が表示されてしまいます。
566
+
567
+
568
+
569
+ 単純に「各ユーザー(ページ内のユーザー)がブックマークしたリスト」を消したらいいのかと思ったのですが、消すと他のユーザーのブックマーク一覧を閲覧した際にそのユーザーのブックマーク一覧を表示するのではなく、ログイン中のユーザーのブックマーク一覧を表示してしまいます・・
570
+
571
+
572
+
573
+ 他のユーザーのブックマークを閲覧した際にはそのユーザーのブックマーク一覧を表示して、1枚のみを表示したいです。
574
+
575
+
576
+
577
+ ####各ユーザー(ページ内のユーザー)がブックマークしたリスト
578
+
579
+ ```ここに言語を入力
580
+
581
+
582
+
583
+ firebase
584
+
585
+ .firestore()
586
+
587
+ .collection("users")
588
+
589
+ .doc(this.$route.params.uid)
590
+
591
+ .collection("bookmarks")
592
+
593
+ .orderBy("time", "desc")
594
+
595
+ .get()
596
+
597
+ .then(snapshot => {
598
+
599
+ snapshot.forEach(doc => {
600
+
601
+ this.bookmarkList.push(doc.data());
602
+
603
+ });
604
+
605
+ });
606
+
607
+ ```
608
+
609
+
610
+
611
+ ####ログイン中ユーザーがブックマークしたリスト
612
+
613
+ ```
614
+
615
+ firebase.auth().onAuthStateChanged(user => {
616
+
617
+ const uid = user.uid;
618
+
619
+ firebase
620
+
621
+ .firestore()
622
+
623
+ .collection("users") //「users」コレクションを参照
624
+
625
+ .doc(uid) //ログイン中のユーザーを参照
626
+
627
+ .collection("bookmarks") //「bookmarks」サブコレクションを参照
628
+
235
629
  .get()
236
630
 
237
631
  .then(snapshot => {
238
632
 
239
633
  snapshot.forEach(doc => {
240
634
 
635
+ //forEachで全てのドキュメントに対して
636
+
241
- this.currentUserBookmarkList.push(doc.postId);
637
+ this.currentUserBookmarkIds.push(doc.data().postId);
638
+
639
+ //「postId」を追加し、this.currentUserBookmarkIdsへ格納
242
640
 
243
641
  });
244
642
 
@@ -248,7 +646,7 @@
248
646
 
249
647
  .firestore()
250
648
 
251
- .collection("posts")
649
+ .collection("posts") //「posts」コレクションを参照
252
650
 
253
651
  .get()
254
652
 
@@ -256,9 +654,23 @@
256
654
 
257
655
  snapshot.forEach(doc => {
258
656
 
657
+ //forEachで全てのドキュメントに対して
658
+
259
- if (this.currentUserBookmarkList.includes(doc.id)) {
659
+ if (this.currentUserBookmarkIds.includes(doc.data().id)) {
660
+
260
-
661
+ //this.currentUserBookmarkIdsに「id」が含まれていたら、
662
+
663
+ this.bookmarkList.push({
664
+
665
+ ...doc.data(),
666
+
667
+ isBookmarked: true
668
+
669
+ });
670
+
671
+ console.log(this.bookmarkList);
672
+
261
- this.bookmarkList.push({ ...doc.data(), isBookmarked: true });
673
+ //...doc.data()としてバラした「posts」の投稿データとisBookmarkedを代入。
262
674
 
263
675
  }
264
676
 
@@ -268,283 +680,11 @@
268
680
 
269
681
  });
270
682
 
683
+ }
684
+
271
- ```
685
+ ```
272
-
273
-
274
-
275
- ####list.vue(子コンポーネント)
686
+
276
-
277
-
278
-
279
- ```ここに言語を入力
687
+
280
-
281
- <template>
282
-
283
- <div class="list">
284
-
285
- <div class="face face1 flex">
286
-
287
- <div class="content">
288
-
289
- <img
290
-
291
- class="profile-icon"
292
-
293
- width="50"
294
-
295
- height="50"
296
-
297
- :src="
298
-
299
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
300
-
301
- "
302
-
303
- />
304
-
305
- <h3>{{ list.title }}</h3>
306
-
307
- {{bookmark}}
308
-
309
- </div>
310
-
311
- </div>
312
-
313
- <div class="face face2 flex">
314
-
315
- <div class="content flex">
316
-
317
- <button class="hide-btn" @click="deletePost">×</button>
318
-
319
- <p>{{ list.description }}</p>
320
-
321
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
322
-
323
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
324
-
325
- <img
326
-
327
- src="../assets/ブックマーク保存.jpg"
328
-
329
- alt="ブックマーク"
330
-
331
- class="bookmark-icon"
332
-
333
- @click="saveBookmark"
334
-
335
-                     v-if="hasBookmark(list)"
336
-
337
- />
338
-
339
- <img
340
-
341
- src="../assets/ブックマーク未保存.jpg"
342
-
343
- alt="ブックマーク"
344
-
345
- class="bookmark-icon"
346
-
347
- @click="deleteBookmark"
348
-
349
-                     v-else
350
-
351
- />
352
-
353
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
354
-
355
- </div>
356
-
357
- </div>
358
-
359
- </div>
360
-
361
- </template>
362
-
363
- ```
364
-
365
-
366
-
367
- ```
368
-
369
- export default {
370
-
371
- data() {
372
-
373
- return {
374
-
375
- bookmarkId: "",
376
-
377
- userDatas: [],
378
-
379
- preview: require("../assets/デフォルト画像.jpg")
380
-
381
- };
382
-
383
- },
384
-
385
- props: {
386
-
387
- list: {
388
-
389
- type: Object
390
-
391
- },
392
-
393
- index: {
394
-
395
- type: Number
396
-
397
- },
398
-
399
- },
400
-
401
-
402
-
403
- methods: {
404
-
405
-
406
-
407
- ~ 省略 ~
408
-
409
-
410
-
411
- hasBookmark(book) {
412
-
413
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
414
-
415
- return this.bookmark.some(value => value.id === book.id);
416
-
417
- },
418
-
419
-
420
-
421
- saveBookmark() {
422
-
423
- const id = firebase
424
-
425
- .firestore()
426
-
427
- .collection("users")
428
-
429
- .doc(this.$route.params.uid)
430
-
431
- .collection("bookmarks")
432
-
433
- .doc().id;
434
-
435
-
436
-
437
- firebase
438
-
439
- .firestore()
440
-
441
- .collection("users")
442
-
443
- .doc(this.$route.params.uid)
444
-
445
- .collection("bookmarks")
446
-
447
- .doc(id)
448
-
449
- .set(
450
-
451
- {
452
-
453
- postId: this.list.id,
454
-
455
- time: firebase.firestore.FieldValue.serverTimestamp()
456
-
457
- }
458
-
459
- )
460
-
461
- .then(() => {
462
-
463
- this.$swal("ブックマークに追加しました。", {
464
-
465
- icon: "success"
466
-
467
- });
468
-
469
- })
470
-
471
- .catch(() => {
472
-
473
- this.$swal("ブックマークを追加出来ません。", {
474
-
475
- icon: "error"
476
-
477
- });
478
-
479
- });
480
-
481
- },
482
-
483
-
484
-
485
- deleteBookmark() {
486
-
487
- firebase
488
-
489
- .firestore()
490
-
491
- .collection("users")
492
-
493
- .doc(this.$route.params.uid)
494
-
495
- .collection("bookmarks")
496
-
497
- .doc(this.list.bookmarkId)
498
-
499
- .delete()
500
-
501
- .then(() => {
502
-
503
- this.$swal("ブックマークを取り消ししました。", {
504
-
505
- icon: "success"
506
-
507
- });
508
-
509
- this.$router.go({
510
-
511
- path: `/bookmark/${this.$route.params.uid}`,
512
-
513
- force: true
514
-
515
- });
516
-
517
- })
518
-
519
- .catch(() => {
520
-
521
- this.$swal("ブックマークを取り消し出来ません。", {
522
-
523
- icon: "error"
524
-
525
- });
526
-
527
- });
528
-
529
- },
530
-
531
- ```
532
-
533
-
534
-
535
- #追記 「Firestoreのデータ構造を変更しました。」が、わからない点がいくつかある状況です。。
536
-
537
-
538
-
539
- ⑴ブックマーク表示について、ブックマーク保存(savebookmark)する際に、投稿(list)のidをサブコレクションのbookmarksへ「postId」としてデータを保存してあげて、そのブックマークされたidである「postId」と投稿のidである「list.id」が一致されたものをブックマーク一覧に表示させるようにする。
540
-
541
-
542
-
543
- ![イメージ説明](5deed5ea424d43ac2bc2730b0ad763ef.png)
544
-
545
-
546
-
547
- 現在Firestoreに「postId」は保存できているので「postId」と「list.id」が一致した情報を取得して表示させたいのですが、現状「postId」と「time」のみしか表示されていなく、上手くいかない状況です・・
548
688
 
549
689
 
550
690
 

9

ソースの内容変更

2021/06/19 12:02

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -20,15 +20,35 @@
20
20
 
21
21
  ```ここに言語を入力
22
22
 
23
+ <img
24
+
23
- <img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" />
25
+ src="../assets/ブックマーク保存.jpg"
26
+
24
-
27
+ alt="ブックマーク"
28
+
29
+ class="bookmark-icon"
30
+
31
+ @click="saveBookmark"
32
+
33
+ v-if="hasBookmark(list)"
34
+
35
+ />
36
+
37
+ <img
38
+
25
- <img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark"/>
39
+ src="../assets/ブックマーク未保存.jpg"
40
+
26
-
41
+ alt="ブックマーク"
42
+
43
+ class="bookmark-icon"
44
+
45
+ @click="deleteBookmark"
46
+
47
+ v-else
48
+
49
+ />
50
+
27
- ```
51
+ ```
28
-
29
-
30
-
31
- そもそも上記のように並べてFirestoreに存在の有無を確認して表示を切り替えることができるのでしょうか。
32
52
 
33
53
 
34
54
 
@@ -36,15 +56,11 @@
36
56
 
37
57
 
38
58
 
39
- また、もし他に良いやり方があればご教示いただけると幸いです。
40
-
41
-
42
-
43
59
  よろしくお願いいたします。
44
60
 
45
61
 
46
62
 
47
- #追記1
63
+ #内容変更
48
64
 
49
65
 
50
66
 
@@ -84,17 +100,7 @@
84
100
 
85
101
  >
86
102
 
87
- <List
88
-
89
- v-for="(list) in paginated('paginate-bookmarkList')"
103
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
90
-
91
- :list="list"
92
-
93
- :bookmark="currentUserBookmarkList"
94
-
95
- :key="list.id"
96
-
97
- />
98
104
 
99
105
  <!-- data内のcurrentUserBookmarkList:[]をbindしてpropsでデータを渡す -->
100
106
 
@@ -216,8 +222,6 @@
216
222
 
217
223
  const uid = user.uid;
218
224
 
219
-
220
-
221
225
  firebase
222
226
 
223
227
  .firestore()
@@ -228,28 +232,42 @@
228
232
 
229
233
  .collection("bookmarks")
230
234
 
231
- .orderBy("time", "desc")
232
-
233
235
  .get()
234
236
 
235
237
  .then(snapshot => {
236
238
 
237
239
  snapshot.forEach(doc => {
238
240
 
239
- this.currentUserBookmarkList.push(doc.data());
241
+ this.currentUserBookmarkList.push(doc.postId);
240
-
241
- console.log(this.currentUserBookmarkList);
242
242
 
243
243
  });
244
244
 
245
245
  });
246
246
 
247
+ firebase
248
+
249
+ .firestore()
250
+
251
+ .collection("posts")
252
+
253
+ .get()
254
+
255
+ .then(snapshot => {
256
+
257
+ snapshot.forEach(doc => {
258
+
259
+ if (this.currentUserBookmarkList.includes(doc.id)) {
260
+
261
+ this.bookmarkList.push({ ...doc.data(), isBookmarked: true });
262
+
263
+ }
264
+
265
+ });
266
+
267
+ });
268
+
247
269
  });
248
270
 
249
- }
250
-
251
- };
252
-
253
271
  ```
254
272
 
255
273
 
@@ -378,61 +396,95 @@
378
396
 
379
397
  },
380
398
 
381
- bookmark: {
382
-
383
- type: Array
384
-
385
- }
386
-
387
399
  },
388
400
 
389
401
 
390
402
 
391
- created() {
403
+ methods: {
404
+
405
+
406
+
392
-
407
+ ~ 省略 ~
408
+
409
+
410
+
411
+ hasBookmark(book) {
412
+
413
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
414
+
415
+ return this.bookmark.some(value => value.id === book.id);
416
+
417
+ },
418
+
419
+
420
+
421
+ saveBookmark() {
422
+
423
+ const id = firebase
424
+
425
+ .firestore()
426
+
427
+ .collection("users")
428
+
429
+ .doc(this.$route.params.uid)
430
+
431
+ .collection("bookmarks")
432
+
433
+ .doc().id;
434
+
435
+
436
+
393
- firebase
437
+ firebase
394
-
438
+
395
- .firestore()
439
+ .firestore()
396
-
440
+
397
- .collection("users")
441
+ .collection("users")
442
+
398
-
443
+ .doc(this.$route.params.uid)
444
+
445
+ .collection("bookmarks")
446
+
447
+ .doc(id)
448
+
399
- .get()
449
+ .set(
450
+
400
-
451
+ {
452
+
453
+ postId: this.list.id,
454
+
455
+ time: firebase.firestore.FieldValue.serverTimestamp()
456
+
457
+ }
458
+
459
+ )
460
+
401
- .then(snapshot => {
461
+ .then(() => {
462
+
402
-
463
+ this.$swal("ブックマークに追加しました。", {
464
+
465
+ icon: "success"
466
+
467
+ });
468
+
469
+ })
470
+
403
- snapshot.forEach(doc => {
471
+ .catch(() => {
404
-
472
+
405
- this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
473
+ this.$swal("ブックマークを追加出来ません。", {
474
+
475
+ icon: "error"
476
+
477
+ });
406
478
 
407
479
  });
408
480
 
409
- });
410
-
411
- },
412
-
413
-
414
-
415
- methods: {
416
-
417
-
418
-
419
- ~ 省略 ~
420
-
421
-
422
-
423
- hasBookmark(book) {
424
-
425
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
426
-
427
- return this.bookmark.some(value => value.id === book.id);
428
-
429
481
  },
430
482
 
431
483
 
432
484
 
433
- saveBookmark() {
485
+ deleteBookmark() {
434
-
486
+
435
- const id = firebase
487
+ firebase
436
488
 
437
489
  .firestore()
438
490
 
@@ -442,45 +494,31 @@
442
494
 
443
495
  .collection("bookmarks")
444
496
 
445
- .doc().id;
446
-
447
-
448
-
449
- firebase
450
-
451
- .firestore()
452
-
453
- .collection("users")
454
-
455
- .doc(this.$route.params.uid)
497
+ .doc(this.list.bookmarkId)
498
+
456
-
499
+ .delete()
500
+
501
+ .then(() => {
502
+
503
+ this.$swal("ブックマークを取り消ししました。", {
504
+
457
- .collection("bookmarks")
505
+ icon: "success"
458
-
459
- .doc(id)
506
+
460
-
461
- .set({
507
+ });
462
-
463
- bookmarkId: id,
508
+
464
-
465
- ...this.list,
509
+ this.$router.go({
466
-
510
+
467
- time: firebase.firestore.FieldValue.serverTimestamp()
511
+ path: `/bookmark/${this.$route.params.uid}`,
512
+
513
+ force: true
514
+
515
+ });
468
516
 
469
517
  })
470
518
 
471
- .then(() => {
472
-
473
- this.$swal("ブックマークに追加しました。", {
474
-
475
- icon: "success"
476
-
477
- });
478
-
479
- })
480
-
481
519
  .catch(() => {
482
520
 
483
- this.$swal("ブックマークを追加出来ません。", {
521
+ this.$swal("ブックマークを取り消し出来ません。", {
484
522
 
485
523
  icon: "error"
486
524
 
@@ -490,143 +528,39 @@
490
528
 
491
529
  },
492
530
 
493
-
494
-
495
- deleteBookmark() {
496
-
497
- firebase
498
-
499
- .firestore()
500
-
501
- .collection("users")
502
-
503
- .doc(this.$route.params.uid)
504
-
505
- .collection("bookmarks")
506
-
507
- .doc(this.list.bookmarkId)
508
-
509
- .delete()
510
-
511
- .then(() => {
512
-
513
- this.$swal("ブックマークをししました。", {
514
-
515
- icon: "success"
516
-
517
- });
518
-
519
- this.$router.go({
520
-
521
- path: `/bookmark/${this.$route.params.uid}`,
522
-
523
- force: true
524
-
525
- });
526
-
527
- })
528
-
529
- .catch(() => {
530
-
531
- this.$swal("ブックマークを取り消し出来ません。", {
532
-
533
- icon: "error"
534
-
535
- });
536
-
537
- });
538
-
539
- },
540
-
541
- }
542
-
543
- };
544
-
545
- </script>
546
-
547
- ```
548
-
549
-
550
-
551
- #bookmark.idを取得できない
552
-
553
-
554
-
555
- 以下画像の青で囲っているようにbookmarkのidは取得できているので、子コンポーネントであるlist.vueにてpropsで親より受けた「bookmark」を使って{{bookmark.id}}としてもbookmarkのidが取得できません・・・
556
-
557
-
558
-
559
- ![イメージ説明](069bd490b3d7384d0056a4ad1038ad46.png)
560
-
561
-
562
-
563
- ```ここに言語を入力
564
-
565
-
566
-
567
- firebase.auth().onAuthStateChanged(user => {
568
-
569
- const uid = user.uid;
570
-
571
-
572
-
573
- firebase
574
-
575
- .firestore()
576
-
577
- .collection("users")
578
-
579
- .doc(uid)
580
-
581
- .collection("bookmarks")
582
-
583
- .orderBy("time", "desc")
584
-
585
- .get()
586
-
587
- .then(snapshot => {
588
-
589
- snapshot.forEach(doc => {
590
-
591
- this.currentUserBookmarkList.push(doc.data());
592
-
593
- console.log(this.currentUserBookmarkList);
594
-
595
- });
596
-
597
- });
598
-
599
- });
600
-
601
- }
602
-
603
- ```
604
-
605
-
606
-
607
- ---
608
-
609
-
610
-
611
- 以下より「book.id」は取得できていることを確認できているので、後「bookmark.id」を取得できれば本件実装できるかと思われますが行き詰まってしまいました・・
612
-
613
-
614
-
615
- ```ここに言語を入力
616
-
617
- hasBookmark(book) {
618
-
619
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
620
-
621
- return this.bookmark.some(value => value.id === book.id);
622
-
623
- },
624
-
625
- ```
626
-
627
-
628
-
629
- 原因分かる方いらっしゃいましたらお力添えを頂きたいです。
531
+ ```
532
+
533
+
534
+
535
+ #追記 「Firestoreのデータ構造を変更しました。」が、わからない点がいくつかある状況です。。
536
+
537
+
538
+
539
+ ⑴ブックマーク表示について、ブックマーク保存(savebookmark)する際に、投稿(list)のidをサブコレクションのbookmarksへ「postId」としてデータを保存してあげて、そのブックマークされたidである「postId」と投稿のidである「list.id」が一致されたものをブックマーク一覧に表示させるようにする。
540
+
541
+
542
+
543
+ ![イメージ説明](5deed5ea424d43ac2bc2730b0ad763ef.png)
544
+
545
+
546
+
547
+ 現在Firestoreに「postId」は保存できているので「postId」と「list.id」が一致した情報を取得して表示させたいのですが、現状「postId」と「time」のみしか表示されていなく、上手くいかない状況です・・
548
+
549
+
550
+
551
+ ⑵listの中にisBookmarkedとしてブックマークされている投稿かどうかが判定できる情報一緒に渡してあげ、listコンポーネント側で、isBookmarkedがtrue,かfalseかで表示を変えてあげようと考えておますが、こちらにつきまても実装たいのですがわからず行き詰っている状況です・・
552
+
553
+
554
+
555
+ ⑶board.vueコンポーネントでも同様に、ログインしているユーザーのブックマーク一覧から、それに紐づいたpostIdを持つ投稿を取り出してきて、それにisBookmarkedをつけてあげてboard.vue側でもブックマークの保存と削除を行えるようにしたいと考えております。
556
+
557
+
558
+
559
+ 上記データ構造から少し複雑であると指摘がありましたので変更しております・・・が、分からず行き詰まってしまっている状況です。。
560
+
561
+
562
+
563
+ ご教示頂けると幸いです。。
630
564
 
631
565
 
632
566
 

8

エラーコードにつきましては解決した為、修正

2021/06/18 15:57

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -96,10 +96,10 @@
96
96
 
97
97
  />
98
98
 
99
+ <!-- data内のcurrentUserBookmarkList:[]をbindしてpropsでデータを渡す -->
100
+
99
101
  </paginate>
100
102
 
101
-
102
-
103
103
  <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
104
104
 
105
105
  <paginate-links
@@ -126,8 +126,6 @@
126
126
 
127
127
  </template>
128
128
 
129
-
130
-
131
129
  ```
132
130
 
133
131
 
@@ -164,6 +162,232 @@
164
162
 
165
163
 
166
164
 
165
+ created() {
166
+
167
+ firebase
168
+
169
+ .firestore()
170
+
171
+ .collection("users")
172
+
173
+ .doc(this.$route.params.uid)
174
+
175
+ .get()
176
+
177
+ .then(snapshot => {
178
+
179
+ this.profileData = snapshot.data();
180
+
181
+ });
182
+
183
+
184
+
185
+ //各ユーザー(ページ内のユーザー)がブックマークしたリスト
186
+
187
+ firebase
188
+
189
+ .firestore()
190
+
191
+ .collection("users")
192
+
193
+ .doc(this.$route.params.uid)
194
+
195
+ .collection("bookmarks")
196
+
197
+ .orderBy("time", "desc")
198
+
199
+ .get()
200
+
201
+ .then(snapshot => {
202
+
203
+ snapshot.forEach(doc => {
204
+
205
+ this.bookmarkList.push(doc.data());
206
+
207
+ });
208
+
209
+ });
210
+
211
+
212
+
213
+ //ログイン中ユーザーがブックマークしたリスト
214
+
215
+ firebase.auth().onAuthStateChanged(user => {
216
+
217
+ const uid = user.uid;
218
+
219
+
220
+
221
+ firebase
222
+
223
+ .firestore()
224
+
225
+ .collection("users")
226
+
227
+ .doc(uid)
228
+
229
+ .collection("bookmarks")
230
+
231
+ .orderBy("time", "desc")
232
+
233
+ .get()
234
+
235
+ .then(snapshot => {
236
+
237
+ snapshot.forEach(doc => {
238
+
239
+ this.currentUserBookmarkList.push(doc.data());
240
+
241
+ console.log(this.currentUserBookmarkList);
242
+
243
+ });
244
+
245
+ });
246
+
247
+ });
248
+
249
+ }
250
+
251
+ };
252
+
253
+ ```
254
+
255
+
256
+
257
+ ####list.vue(子コンポーネント)
258
+
259
+
260
+
261
+ ```ここに言語を入力
262
+
263
+ <template>
264
+
265
+ <div class="list">
266
+
267
+ <div class="face face1 flex">
268
+
269
+ <div class="content">
270
+
271
+ <img
272
+
273
+ class="profile-icon"
274
+
275
+ width="50"
276
+
277
+ height="50"
278
+
279
+ :src="
280
+
281
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
282
+
283
+ "
284
+
285
+ />
286
+
287
+ <h3>{{ list.title }}</h3>
288
+
289
+ {{bookmark}}
290
+
291
+ </div>
292
+
293
+ </div>
294
+
295
+ <div class="face face2 flex">
296
+
297
+ <div class="content flex">
298
+
299
+ <button class="hide-btn" @click="deletePost">×</button>
300
+
301
+ <p>{{ list.description }}</p>
302
+
303
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
304
+
305
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
306
+
307
+ <img
308
+
309
+ src="../assets/ブックマーク保存.jpg"
310
+
311
+ alt="ブックマーク"
312
+
313
+ class="bookmark-icon"
314
+
315
+ @click="saveBookmark"
316
+
317
+                     v-if="hasBookmark(list)"
318
+
319
+ />
320
+
321
+ <img
322
+
323
+ src="../assets/ブックマーク未保存.jpg"
324
+
325
+ alt="ブックマーク"
326
+
327
+ class="bookmark-icon"
328
+
329
+ @click="deleteBookmark"
330
+
331
+                     v-else
332
+
333
+ />
334
+
335
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
336
+
337
+ </div>
338
+
339
+ </div>
340
+
341
+ </div>
342
+
343
+ </template>
344
+
345
+ ```
346
+
347
+
348
+
349
+ ```
350
+
351
+ export default {
352
+
353
+ data() {
354
+
355
+ return {
356
+
357
+ bookmarkId: "",
358
+
359
+ userDatas: [],
360
+
361
+ preview: require("../assets/デフォルト画像.jpg")
362
+
363
+ };
364
+
365
+ },
366
+
367
+ props: {
368
+
369
+ list: {
370
+
371
+ type: Object
372
+
373
+ },
374
+
375
+ index: {
376
+
377
+ type: Number
378
+
379
+ },
380
+
381
+ bookmark: {
382
+
383
+ type: Array
384
+
385
+ }
386
+
387
+ },
388
+
389
+
390
+
167
391
  created() {
168
392
 
169
393
  firebase
@@ -172,550 +396,232 @@
172
396
 
173
397
  .collection("users")
174
398
 
175
- .doc(this.$route.params.uid)
176
-
177
399
  .get()
178
400
 
179
401
  .then(snapshot => {
180
402
 
403
+ snapshot.forEach(doc => {
404
+
181
- this.profileData = snapshot.data();
405
+ this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
406
+
407
+ });
182
408
 
183
409
  });
184
410
 
185
-
411
+ },
412
+
413
+
414
+
186
-
415
+ methods: {
416
+
417
+
418
+
419
+ ~ 省略 ~
420
+
421
+
422
+
423
+ hasBookmark(book) {
424
+
425
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
426
+
427
+ return this.bookmark.some(value => value.id === book.id);
428
+
429
+ },
430
+
431
+
432
+
433
+ saveBookmark() {
434
+
435
+ const id = firebase
436
+
437
+ .firestore()
438
+
439
+ .collection("users")
440
+
441
+ .doc(this.$route.params.uid)
442
+
443
+ .collection("bookmarks")
444
+
445
+ .doc().id;
446
+
447
+
448
+
187
- firebase
449
+ firebase
188
-
450
+
189
- .firestore()
451
+ .firestore()
190
-
452
+
191
- .collection("users")
453
+ .collection("users")
192
-
454
+
193
- .doc(this.$route.params.uid)
455
+ .doc(this.$route.params.uid)
194
-
456
+
195
- .collection("bookmarks")
457
+ .collection("bookmarks")
196
-
458
+
197
- .orderBy("time", "desc")
459
+ .doc(id)
198
-
460
+
199
- .get()
461
+ .set({
462
+
200
-
463
+ bookmarkId: id,
464
+
465
+ ...this.list,
466
+
467
+ time: firebase.firestore.FieldValue.serverTimestamp()
468
+
469
+ })
470
+
201
- .then(snapshot => {
471
+ .then(() => {
472
+
202
-
473
+ this.$swal("ブックマークに追加しました。", {
474
+
475
+ icon: "success"
476
+
477
+ });
478
+
479
+ })
480
+
203
- snapshot.forEach(doc => {
481
+ .catch(() => {
204
-
482
+
205
- this.bookmarkList.push(doc.data());
483
+ this.$swal("ブックマークを追加出来ません。", {
484
+
485
+ icon: "error"
486
+
487
+ });
206
488
 
207
489
  });
208
490
 
491
+ },
492
+
493
+
494
+
495
+ deleteBookmark() {
496
+
497
+ firebase
498
+
499
+ .firestore()
500
+
501
+ .collection("users")
502
+
503
+ .doc(this.$route.params.uid)
504
+
505
+ .collection("bookmarks")
506
+
507
+ .doc(this.list.bookmarkId)
508
+
509
+ .delete()
510
+
511
+ .then(() => {
512
+
513
+ this.$swal("ブックマークを取り消ししました。", {
514
+
515
+ icon: "success"
516
+
209
- });
517
+ });
210
-
211
-
212
-
213
- const currentUser = firebase.auth().currentUser;
518
+
214
-
215
- const uid = currentUser.uid;
519
+ this.$router.go({
520
+
216
-
521
+ path: `/bookmark/${this.$route.params.uid}`,
217
-
218
-
522
+
219
- firebase
523
+ force: true
524
+
220
-
525
+ });
526
+
527
+ })
528
+
221
- .firestore()
529
+ .catch(() => {
530
+
222
-
531
+ this.$swal("ブックマークを取り消し出来ません。", {
532
+
223
- .collection("users")
533
+ icon: "error"
224
-
225
- .doc(uid)
534
+
226
-
227
- .collection("bookmarks")
228
-
229
- .orderBy("time", "desc")
230
-
231
- .get()
535
+ });
232
-
233
- .then(snapshot => {
234
-
235
- snapshot.forEach(doc => {
236
-
237
- this.currentUserBookmarkList.push(doc.data());
238
-
239
- // console.log(this.currentUserBookmarkList);
240
536
 
241
537
  });
242
538
 
243
- });
539
+ },
244
540
 
245
541
  }
246
542
 
247
543
  };
248
544
 
545
+ </script>
546
+
249
- ```
547
+ ```
250
-
251
-
252
-
548
+
549
+
550
+
253
- ####list.vue(子コンポーネント)
551
+ #bookmark.idを取得できない
552
+
553
+
554
+
555
+ 以下画像の青で囲っているようにbookmarkのidは取得できているので、子コンポーネントであるlist.vueにてpropsで親より受けた「bookmark」を使って{{bookmark.id}}としてもbookmarkのidが取得できません・・・
556
+
557
+
558
+
559
+ ![イメージ説明](069bd490b3d7384d0056a4ad1038ad46.png)
254
560
 
255
561
 
256
562
 
257
563
  ```ここに言語を入力
258
564
 
259
- <template>
260
-
261
- <div class="list">
262
-
263
- <div class="face face1 flex">
264
-
265
- <div class="content">
266
-
267
- <img
268
-
269
- class="profile-icon"
270
-
271
- width="50"
272
-
273
- height="50"
274
-
275
- :src="
276
-
277
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
278
-
279
- "
280
-
281
- />
282
-
283
- <h3>{{ list.title }}</h3>
284
-
285
- {{bookmark}}
286
-
287
- </div>
288
-
289
- </div>
290
-
291
- <div class="face face2 flex">
292
-
293
- <div class="content flex">
294
-
295
- <button class="hide-btn" @click="deletePost">×</button>
296
-
297
- <p>{{ list.description }}</p>
298
-
299
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
300
-
301
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
302
-
303
- <img
304
-
305
- src="../assets/ブックマーク保存.jpg"
306
-
307
- alt="ブックマーク"
308
-
309
- class="bookmark-icon"
310
-
311
- @click="saveBookmark"
312
-
313
-
314
-
315
- />
316
-
317
- <img
318
-
319
- src="../assets/ブックマーク未保存.jpg"
320
-
321
- alt="ブックマーク"
322
-
323
- class="bookmark-icon"
324
-
325
- @click="deleteBookmark"
326
-
327
-
328
-
329
- />
330
-
331
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
332
-
333
- </div>
334
-
335
- </div>
336
-
337
- </div>
338
-
339
- </template>
340
-
341
- ```
342
-
343
-
344
-
345
- ```
346
-
347
- export default {
348
-
349
- data() {
350
-
351
- return {
352
-
353
- bookmarkId: "",
354
-
355
- userDatas: [],
356
-
357
- preview: require("../assets/デフォルト画像.jpg")
358
-
359
- };
360
-
361
- },
362
-
363
- props: {
364
-
365
- list: {
366
-
367
- type: Object
565
+
566
+
567
+ firebase.auth().onAuthStateChanged(user => {
568
+
569
+ const uid = user.uid;
570
+
571
+
572
+
573
+ firebase
574
+
575
+ .firestore()
576
+
577
+ .collection("users")
578
+
579
+ .doc(uid)
580
+
581
+ .collection("bookmarks")
582
+
583
+ .orderBy("time", "desc")
584
+
585
+ .get()
586
+
587
+ .then(snapshot => {
588
+
589
+ snapshot.forEach(doc => {
590
+
591
+ this.currentUserBookmarkList.push(doc.data());
592
+
593
+ console.log(this.currentUserBookmarkList);
594
+
595
+ });
596
+
597
+ });
598
+
599
+ });
600
+
601
+ }
602
+
603
+ ```
604
+
605
+
606
+
607
+ ---
608
+
609
+
610
+
611
+ 以下より「book.id」は取得できていることを確認できているので、後「bookmark.id」を取得できれば本件実装できるかと思われますが行き詰まってしまいました・・
612
+
613
+
614
+
615
+ ```ここに言語を入力
616
+
617
+ hasBookmark(book) {
618
+
619
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
620
+
621
+ return this.bookmark.some(value => value.id === book.id);
368
622
 
369
623
  },
370
624
 
371
- index: {
372
-
373
- type: Number
374
-
375
- },
376
-
377
- bookmark: {
378
-
379
- type: Array
380
-
381
- }
382
-
383
- },
384
-
385
-
386
-
387
- created() {
388
-
389
- firebase
390
-
391
- .firestore()
392
-
393
- .collection("users")
394
-
395
- .get()
396
-
397
- .then(snapshot => {
398
-
399
- snapshot.forEach(doc => {
400
-
401
- this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
402
-
403
- });
404
-
405
- });
406
-
407
- },
408
-
409
-
410
-
411
- methods: {
412
-
413
-
414
-
415
- ~ 省略 ~
416
-
417
-
418
-
419
- hasBookmark(book) {
420
-
421
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
422
-
423
- return this.bookmark.some(value => value.id === book.id);
424
-
425
- },
426
-
427
-
428
-
429
- saveBookmark() {
430
-
431
- const ref = firebase
432
-
433
- .firestore()
434
-
435
- .collection("users")
436
-
437
- .doc(this.$route.params.uid)
438
-
439
- .collection("bookmarks")
440
-
441
- .doc();
442
-
443
-
444
-
445
- const id = ref.id;
446
-
447
-
448
-
449
- firebase
450
-
451
- .firestore()
452
-
453
- .collection("users")
454
-
455
- .doc(this.$route.params.uid)
456
-
457
- .collection("bookmarks")
458
-
459
- .doc(id)
460
-
461
- .set({
462
-
463
- bookmarkId: id,
464
-
465
- ...this.list,
466
-
467
- time: firebase.firestore.FieldValue.serverTimestamp()
468
-
469
- })
470
-
471
- .then(() => {
472
-
473
- this.$swal("ブックマークに追加しました。", {
474
-
475
- icon: "success"
476
-
477
- });
478
-
479
- })
480
-
481
- .catch(() => {
482
-
483
- this.$swal("ブックマークを追加出来ません。", {
484
-
485
- icon: "error"
486
-
487
- });
488
-
489
- });
490
-
491
- },
492
-
493
-
494
-
495
- deleteBookmark() {
496
-
497
- firebase
498
-
499
- .firestore()
500
-
501
- .collection("users")
502
-
503
- .doc(this.$route.params.uid)
504
-
505
- .collection("bookmarks")
506
-
507
- .doc(this.list.bookmarkId)
508
-
509
- .delete()
510
-
511
- .then(() => {
512
-
513
- this.$swal("ブックマークを取り消ししました。", {
514
-
515
- icon: "success"
516
-
517
- });
518
-
519
- this.$router.go({
520
-
521
- path: `/bookmark/${this.$route.params.uid}`,
522
-
523
- force: true
524
-
525
- });
526
-
527
- })
528
-
529
- .catch(() => {
530
-
531
- this.$swal("ブックマークを取り消し出来ません。", {
532
-
533
- icon: "error"
534
-
535
- });
536
-
537
- });
538
-
539
- },
540
-
541
- }
542
-
543
- };
544
-
545
- </script>
546
-
547
- ```
548
-
549
-
550
-
551
- ####⑴エラーコード
552
-
553
-
554
-
555
- ![イメージ説明](416198e63f8c3757043c1b2f95417b98.png)
556
-
557
-
558
-
559
- ```ここに言語を入力
560
-
561
- created hook: "TypeError: Cannot read property 'uid' of null"
562
-
563
- ```
564
-
565
- 作成されたフック: "TypeError:nullのプロパティ 'uid'を読み取れません"とエラーが出てしまい、bookmark.vueへページ遷移した場合、上記画像のように「this.currentUserBookmarkList」内のデータが取得できておりますが、リロードするとデータが反映されなくなってしまいます。
566
-
567
-
568
-
569
- 原因は以下「currentUser.uid」を取得しているのですが、リロードしてしまうと「currentUser.uid」が取得する前にcreated()内を処理してしまうのか「currentUser.uid」を取得できないようです。
570
-
571
-
572
-
573
- ```ここに言語を入力
574
-
575
- const currentUser = firebase.auth().currentUser;
576
-
577
- const uid = currentUser.uid;
578
-
579
- ```
580
-
581
-
582
-
583
- ####試したこと
584
-
585
-
586
-
587
- created()内で宣言しているのが原因かと思い、mounted()内で宣言しユーザー認証される前にuidを参照してしまっているようなので「firebase.auth().onAuthStateChanged」内でコードを記述し試してみましたが以下のエラーが出ます・・
588
-
589
-
590
-
591
- ```ここに言語を入力
592
-
593
- Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
594
-
595
- ```
596
-
597
- Uncaught(in promise)TypeError:undefinedのプロパティ 'push'を読み取ることができません
598
-
599
-
600
-
601
- ```ここに言語を入力
602
-
603
- mounted() {
604
-
605
- firebase.auth().onAuthStateChanged(function(currentUser) {
606
-
607
- if (currentUser) {
608
-
609
- const currentUser = firebase.auth().currentUser;
610
-
611
- const uid = currentUser.uid;
612
-
613
-
614
-
615
- firebase
616
-
617
- .firestore()
618
-
619
- .collection("users")
620
-
621
- .doc(uid)
622
-
623
- .collection("bookmarks")
624
-
625
- .orderBy("time", "desc")
626
-
627
- .get()
628
-
629
- .then(snapshot => {
630
-
631
- snapshot.forEach(doc => {
632
-
633
- this.currentUserBookmarkList.push(doc.data());
634
-
635
- // console.log(this.currentUserBookmarkList);
636
-
637
- });
638
-
639
- });
640
-
641
- }
642
-
643
- });
644
-
645
- }
646
-
647
- ```
648
-
649
-
650
-
651
- #⑵bookmark.idを取得できない
652
-
653
-
654
-
655
- 以下画像の青で囲っているようにbookmarkのidは取得できているので、子コンポーネントであるlist.vueにてpropsで親より受けた「bookmark」を使って{{bookmark.id}}としてもbookmarkのidが取得できません・・・
656
-
657
-
658
-
659
- ![イメージ説明](069bd490b3d7384d0056a4ad1038ad46.png)
660
-
661
-
662
-
663
- ```ここに言語を入力
664
-
665
- const currentUser = firebase.auth().currentUser;
666
-
667
- const uid = currentUser.uid;
668
-
669
-
670
-
671
- firebase
672
-
673
- .firestore()
674
-
675
- .collection("users")
676
-
677
- .doc(uid)
678
-
679
- .collection("bookmarks")
680
-
681
- .orderBy("time", "desc")
682
-
683
- .get()
684
-
685
- .then(snapshot => {
686
-
687
- snapshot.forEach(doc => {
688
-
689
- this.currentUserBookmarkList.push(doc.data());
690
-
691
- console.log(this.currentUserBookmarkList);
692
-
693
- });
694
-
695
- });
696
-
697
- ```
698
-
699
-
700
-
701
- ---
702
-
703
-
704
-
705
- 以下より「book.id」は取得できていることを確認できているので、後「bookmark.id」を取得できれば本件実装できるかと思われますが行き詰まってしまいました・・
706
-
707
-
708
-
709
- ```ここに言語を入力
710
-
711
- hasBookmark(book) {
712
-
713
- // ブックマークリスト内にbook idがあればtrue それ以外はfalse
714
-
715
- return this.bookmark.some(value => value.id === book.id);
716
-
717
- },
718
-
719
625
  ```
720
626
 
721
627
 

7

内容修正

2021/06/16 14:59

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -698,6 +698,10 @@
698
698
 
699
699
 
700
700
 
701
+ ---
702
+
703
+
704
+
701
705
  以下より「book.id」は取得できていることを確認できているので、後「bookmark.id」を取得できれば本件実装できるかと思われますが行き詰まってしまいました・・
702
706
 
703
707
 

6

再度追記1追加

2021/06/15 13:53

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- ####bookmark.vue
51
+ ####bookmark.vue(親コンポーネント)
52
52
 
53
53
 
54
54
 
@@ -250,7 +250,7 @@
250
250
 
251
251
 
252
252
 
253
- ####list.vue
253
+ ####list.vue(子コンポーネント)
254
254
 
255
255
 
256
256
 
@@ -566,7 +566,7 @@
566
566
 
567
567
 
568
568
 
569
- 原因は以下「currentUser.uid」を取得しているのですが、リロードしてしまうと「currentUser.uid」が取得できないようです。
569
+ 原因は以下「currentUser.uid」を取得しているのですが、リロードしてしまうと「currentUser.uid」が取得する前にcreated()内を処理してしまうのか「currentUser.uid」を取得できないようです。
570
570
 
571
571
 
572
572
 

5

内容修正

2021/06/15 13:52

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -48,75 +48,11 @@
48
48
 
49
49
 
50
50
 
51
-
51
+ ####bookmark.vue
52
-
52
+
53
+
54
+
53
- ```ここに言語を入力
55
+ ```ここに言語を入力
54
-
55
- vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "bookmarkList"
56
-
57
-
58
-
59
- found in
60
-
61
-
62
-
63
- ---> <List>
64
-
65
- <Paginate>
66
-
67
- <Anonymous>
68
-
69
- <App> at src/App.vue
70
-
71
- <Root>
72
-
73
- ```
74
-
75
-
76
-
77
- ![イメージ説明](a164b27c60e2cc3f9190f602e96f03c3.png)
78
-
79
-
80
-
81
- #追記2
82
-
83
-
84
-
85
- 色々調べておりましたら親から子へデータをpropsで渡す際に
86
-
87
-
88
-
89
- ```
90
-
91
- <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmarkList="bookmarklist" :key="list.id"/>
92
-
93
- ```
94
-
95
-
96
-
97
- としておりましたが、子で受ける際はキャメルケースでは「undefined」となるようなので以下のようにしました。
98
-
99
-
100
-
101
- ```
102
-
103
- <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmark="bookmarklist" :key="list.id"/>
104
-
105
- ```
106
-
107
-
108
-
109
- 参考記事:[【Vue.js】propsで子コンポーネントにデータが渡らないのはHTMLの命名規則が原因だった](https://qiita.com/_Keitaro_/items/f77d2340f9390f028677)
110
-
111
-
112
-
113
-
114
-
115
- #bookmark.vue
116
-
117
-
118
-
119
- ```
120
56
 
121
57
  <template>
122
58
 
@@ -142,7 +78,7 @@
142
78
 
143
79
  :list="bookmarkList"
144
80
 
145
- :per="3"
81
+ :per="12"
146
82
 
147
83
  v-if="bookmarkList.length !== 0"
148
84
 
@@ -154,7 +90,7 @@
154
90
 
155
91
  :list="list"
156
92
 
157
- :bookmark="bookmarklist"
93
+ :bookmark="currentUserBookmarkList"
158
94
 
159
95
  :key="list.id"
160
96
 
@@ -162,6 +98,8 @@
162
98
 
163
99
  </paginate>
164
100
 
101
+
102
+
165
103
  <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
166
104
 
167
105
  <paginate-links
@@ -178,7 +116,7 @@
178
116
 
179
117
  :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
180
118
 
181
- ></paginate-links>
119
+ ></paginate-links>
182
120
 
183
121
  </div>
184
122
 
@@ -188,6 +126,8 @@
188
126
 
189
127
  </template>
190
128
 
129
+
130
+
191
131
  ```
192
132
 
193
133
 
@@ -198,11 +138,17 @@
198
138
 
199
139
  data() {
200
140
 
201
- return
141
+ return {
142
+
143
+ profileData: {},
202
144
 
203
145
  paginate: ["paginate-bookmarkList"],
204
146
 
205
- bookmarkList: []
147
+ bookmarkList: [],
148
+
149
+ currentUserBookmarkList: [],
150
+
151
+ uid: null
206
152
 
207
153
  };
208
154
 
@@ -216,280 +162,562 @@
216
162
 
217
163
  },
218
164
 
165
+
166
+
167
+ created() {
168
+
169
+ firebase
170
+
171
+ .firestore()
172
+
173
+ .collection("users")
174
+
175
+ .doc(this.$route.params.uid)
176
+
177
+ .get()
178
+
179
+ .then(snapshot => {
180
+
181
+ this.profileData = snapshot.data();
182
+
183
+ });
184
+
185
+
186
+
187
+ firebase
188
+
189
+ .firestore()
190
+
191
+ .collection("users")
192
+
193
+ .doc(this.$route.params.uid)
194
+
195
+ .collection("bookmarks")
196
+
197
+ .orderBy("time", "desc")
198
+
199
+ .get()
200
+
201
+ .then(snapshot => {
202
+
203
+ snapshot.forEach(doc => {
204
+
205
+ this.bookmarkList.push(doc.data());
206
+
207
+ });
208
+
209
+ });
210
+
211
+
212
+
213
+ const currentUser = firebase.auth().currentUser;
214
+
215
+ const uid = currentUser.uid;
216
+
217
+
218
+
219
+ firebase
220
+
221
+ .firestore()
222
+
223
+ .collection("users")
224
+
225
+ .doc(uid)
226
+
227
+ .collection("bookmarks")
228
+
229
+ .orderBy("time", "desc")
230
+
231
+ .get()
232
+
233
+ .then(snapshot => {
234
+
235
+ snapshot.forEach(doc => {
236
+
237
+ this.currentUserBookmarkList.push(doc.data());
238
+
239
+ // console.log(this.currentUserBookmarkList);
240
+
241
+ });
242
+
243
+ });
244
+
245
+ }
246
+
219
247
  };
220
248
 
249
+ ```
250
+
251
+
252
+
253
+ ####list.vue
254
+
255
+
256
+
257
+ ```ここに言語を入力
258
+
259
+ <template>
260
+
261
+ <div class="list">
262
+
263
+ <div class="face face1 flex">
264
+
265
+ <div class="content">
266
+
267
+ <img
268
+
269
+ class="profile-icon"
270
+
271
+ width="50"
272
+
273
+ height="50"
274
+
275
+ :src="
276
+
277
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
278
+
279
+ "
280
+
281
+ />
282
+
283
+ <h3>{{ list.title }}</h3>
284
+
285
+ {{bookmark}}
286
+
287
+ </div>
288
+
289
+ </div>
290
+
291
+ <div class="face face2 flex">
292
+
293
+ <div class="content flex">
294
+
295
+ <button class="hide-btn" @click="deletePost">×</button>
296
+
297
+ <p>{{ list.description }}</p>
298
+
299
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
300
+
301
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
302
+
303
+ <img
304
+
305
+ src="../assets/ブックマーク保存.jpg"
306
+
307
+ alt="ブックマーク"
308
+
309
+ class="bookmark-icon"
310
+
311
+ @click="saveBookmark"
312
+
313
+
314
+
315
+ />
316
+
317
+ <img
318
+
319
+ src="../assets/ブックマーク未保存.jpg"
320
+
321
+ alt="ブックマーク"
322
+
323
+ class="bookmark-icon"
324
+
325
+ @click="deleteBookmark"
326
+
327
+
328
+
329
+ />
330
+
331
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
332
+
333
+ </div>
334
+
335
+ </div>
336
+
337
+ </div>
338
+
339
+ </template>
340
+
341
+ ```
342
+
343
+
344
+
345
+ ```
346
+
347
+ export default {
348
+
349
+ data() {
350
+
351
+ return {
352
+
353
+ bookmarkId: "",
354
+
355
+ userDatas: [],
356
+
357
+ preview: require("../assets/デフォルト画像.jpg")
358
+
359
+ };
360
+
361
+ },
362
+
363
+ props: {
364
+
365
+ list: {
366
+
367
+ type: Object
368
+
369
+ },
370
+
371
+ index: {
372
+
373
+ type: Number
374
+
375
+ },
376
+
377
+ bookmark: {
378
+
379
+ type: Array
380
+
381
+ }
382
+
383
+ },
384
+
385
+
386
+
387
+ created() {
388
+
389
+ firebase
390
+
391
+ .firestore()
392
+
393
+ .collection("users")
394
+
395
+ .get()
396
+
397
+ .then(snapshot => {
398
+
399
+ snapshot.forEach(doc => {
400
+
401
+ this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
402
+
403
+ });
404
+
405
+ });
406
+
407
+ },
408
+
409
+
410
+
411
+ methods: {
412
+
413
+
414
+
415
+ ~ 省略 ~
416
+
417
+
418
+
419
+ hasBookmark(book) {
420
+
421
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
422
+
423
+ return this.bookmark.some(value => value.id === book.id);
424
+
425
+ },
426
+
427
+
428
+
429
+ saveBookmark() {
430
+
431
+ const ref = firebase
432
+
433
+ .firestore()
434
+
435
+ .collection("users")
436
+
437
+ .doc(this.$route.params.uid)
438
+
439
+ .collection("bookmarks")
440
+
441
+ .doc();
442
+
443
+
444
+
445
+ const id = ref.id;
446
+
447
+
448
+
449
+ firebase
450
+
451
+ .firestore()
452
+
453
+ .collection("users")
454
+
455
+ .doc(this.$route.params.uid)
456
+
457
+ .collection("bookmarks")
458
+
459
+ .doc(id)
460
+
461
+ .set({
462
+
463
+ bookmarkId: id,
464
+
465
+ ...this.list,
466
+
467
+ time: firebase.firestore.FieldValue.serverTimestamp()
468
+
469
+ })
470
+
471
+ .then(() => {
472
+
473
+ this.$swal("ブックマークに追加しました。", {
474
+
475
+ icon: "success"
476
+
477
+ });
478
+
479
+ })
480
+
481
+ .catch(() => {
482
+
483
+ this.$swal("ブックマークを追加出来ません。", {
484
+
485
+ icon: "error"
486
+
487
+ });
488
+
489
+ });
490
+
491
+ },
492
+
493
+
494
+
495
+ deleteBookmark() {
496
+
497
+ firebase
498
+
499
+ .firestore()
500
+
501
+ .collection("users")
502
+
503
+ .doc(this.$route.params.uid)
504
+
505
+ .collection("bookmarks")
506
+
507
+ .doc(this.list.bookmarkId)
508
+
509
+ .delete()
510
+
511
+ .then(() => {
512
+
513
+ this.$swal("ブックマークを取り消ししました。", {
514
+
515
+ icon: "success"
516
+
517
+ });
518
+
519
+ this.$router.go({
520
+
521
+ path: `/bookmark/${this.$route.params.uid}`,
522
+
523
+ force: true
524
+
525
+ });
526
+
527
+ })
528
+
529
+ .catch(() => {
530
+
531
+ this.$swal("ブックマークを取り消し出来ません。", {
532
+
533
+ icon: "error"
534
+
535
+ });
536
+
537
+ });
538
+
539
+ },
540
+
541
+ }
542
+
543
+ };
544
+
221
545
  </script>
222
546
 
223
547
  ```
224
548
 
225
549
 
226
550
 
227
- #list.vue
228
-
229
-
230
-
231
- ```ここに言語を入力
232
-
233
- <template>
234
-
235
- <div class="list">
236
-
237
- <div class="face face1 flex">
238
-
239
- <div class="content">
240
-
241
- <img
242
-
243
- class="profile-icon"
244
-
245
- width="50"
246
-
247
- height="50"
248
-
249
- :src="
250
-
251
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
252
-
253
- "
254
-
255
- />
256
-
257
- <h3>{{ list.title }}</h3>
258
-
259
- </div>
260
-
261
- </div>
262
-
263
- <div class="face face2 flex">
264
-
265
- <div class="content flex">
266
-
267
- <button class="hide-btn" @click="deletePost">×</button>
268
-
269
- <p>{{ list.description }}</p>
270
-
271
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
272
-
273
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
274
-
275
- <img
276
-
277
- src="../assets/ブックマーク保存.jpg"
278
-
279
- alt="ブックマーク"
280
-
281
- class="bookmark-icon"
282
-
283
- @click="saveBookmark"
284
-
285
- />
286
-
287
- <img
288
-
289
- src="../assets/ブックマーク未保存.jpg"
290
-
291
- alt="ブックマーク"
292
-
293
- class="bookmark-icon"
294
-
295
- @click="deleteBookmark"
296
-
297
- />
298
-
299
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
300
-
301
- </div>
302
-
303
- </div>
304
-
305
- </div>
306
-
307
- </template>
308
-
309
- ```
310
-
311
-
312
-
313
- ```
314
-
315
- export default {
316
-
317
- data() {
318
-
319
- return {
320
-
321
- bookmarkId: "",
322
-
323
- preview: require("../assets/デフォルト画像.jpg")
324
-
325
- };
326
-
327
- },
328
-
329
- props: {
330
-
331
- list: {
332
-
333
- type: Object,
334
-
335
- required: true
551
+ ####⑴エラーコード
552
+
553
+
554
+
555
+ ![イメージ説明](416198e63f8c3757043c1b2f95417b98.png)
556
+
557
+
558
+
559
+ ```ここに言語を入力
560
+
561
+ created hook: "TypeError: Cannot read property 'uid' of null"
562
+
563
+ ```
564
+
565
+ 作成されたフック: "TypeError:nullのプロパティ 'uid'を読み取れません"とエラーが出てしまい、bookmark.vueへページ遷移した場合、上記画像のように「this.currentUserBookmarkList」内のデータが取得できておりますが、リロードするとデータが反映されなくなってしまいます。
566
+
567
+
568
+
569
+ 原因は以下「currentUser.uid」を取得しているのですが、リロードしてしまうと「currentUser.uid」が取得できないようです。
570
+
571
+
572
+
573
+ ```ここに言語を入力
574
+
575
+ const currentUser = firebase.auth().currentUser;
576
+
577
+ const uid = currentUser.uid;
578
+
579
+ ```
580
+
581
+
582
+
583
+ ####試したこと
584
+
585
+
586
+
587
+ created()内で宣言しているのが原因かと思い、mounted()内で宣言しユーザー認証される前にuidを参照してしまっているようなので「firebase.auth().onAuthStateChanged」内でコードを記述し試してみましたが以下のエラーが出ます・・
588
+
589
+
590
+
591
+ ```ここに言語を入力
592
+
593
+ Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
594
+
595
+ ```
596
+
597
+ Uncaught(in promise)TypeError:undefinedのプロパティ 'push'読みることができません
598
+
599
+
600
+
601
+ ```ここに言語を入力
602
+
603
+ mounted() {
604
+
605
+ firebase.auth().onAuthStateChanged(function(currentUser) {
606
+
607
+ if (currentUser) {
608
+
609
+ const currentUser = firebase.auth().currentUser;
610
+
611
+ const uid = currentUser.uid;
612
+
613
+
614
+
615
+ firebase
616
+
617
+ .firestore()
618
+
619
+ .collection("users")
620
+
621
+ .doc(uid)
622
+
623
+ .collection("bookmarks")
624
+
625
+ .orderBy("time", "desc")
626
+
627
+ .get()
628
+
629
+ .then(snapshot => {
630
+
631
+ snapshot.forEach(doc => {
632
+
633
+ this.currentUserBookmarkList.push(doc.data());
634
+
635
+ // console.log(this.currentUserBookmarkList);
636
+
637
+ });
638
+
639
+ });
640
+
641
+ }
642
+
643
+ });
644
+
645
+ }
646
+
647
+ ```
648
+
649
+
650
+
651
+ #⑵bookmark.idを取得できない
652
+
653
+
654
+
655
+ 以下画像の青で囲っているようにbookmarkのidは取得できているので、子コンポーネントであるlist.vueにてpropsで親より受けた「bookmark」を使って{{bookmark.id}}としてもbookmarkのidが取得できません・・・
656
+
657
+
658
+
659
+ ![イメージ説明](069bd490b3d7384d0056a4ad1038ad46.png)
660
+
661
+
662
+
663
+ ```ここに言語を入力
664
+
665
+ const currentUser = firebase.auth().currentUser;
666
+
667
+ const uid = currentUser.uid;
668
+
669
+
670
+
671
+ firebase
672
+
673
+ .firestore()
674
+
675
+ .collection("users")
676
+
677
+ .doc(uid)
678
+
679
+ .collection("bookmarks")
680
+
681
+ .orderBy("time", "desc")
682
+
683
+ .get()
684
+
685
+ .then(snapshot => {
686
+
687
+ snapshot.forEach(doc => {
688
+
689
+ this.currentUserBookmarkList.push(doc.data());
690
+
691
+ console.log(this.currentUserBookmarkList);
692
+
693
+ });
694
+
695
+ });
696
+
697
+ ```
698
+
699
+
700
+
701
+ 以下より「book.id」は取得できていることを確認できているので、後「bookmark.id」を取得できれば本件実装できるかと思われますが行き詰まってしまいました・・
702
+
703
+
704
+
705
+ ```ここに言語を入力
706
+
707
+ hasBookmark(book) {
708
+
709
+ // ブックマークリスト内にbook idがあればtrue それ以外はfalse
710
+
711
+ return this.bookmark.some(value => value.id === book.id);
336
712
 
337
713
  },
338
714
 
339
- index: {
340
-
341
- type: Number
342
-
343
- },
344
-
345
- bookmark: {
346
-
347
- type: Object,
348
-
349
- required: true,
350
-
351
- default:() => {}, //修正箇所
352
-
353
- }
354
-
355
- },
356
-
357
-
358
-
359
- methods: {
360
-
361
-
362
-
363
- hasBookmark(book) { //追加
364
-
365
- return this.bookmark.some(value => value.id === book.id);
366
-
367
- },
368
-
369
-
370
-
371
- saveBookmark() {
372
-
373
- const ref = firebase
374
-
375
- .firestore()
376
-
377
- .collection("users")
378
-
379
- .doc(this.$route.params.uid)
380
-
381
- .collection("bookmarks")
382
-
383
- .doc();
384
-
385
-
386
-
387
- const id = ref.id;
388
-
389
-
390
-
391
- firebase
392
-
393
- .firestore()
394
-
395
- .collection("users")
396
-
397
- .doc(this.$route.params.uid)
398
-
399
- .collection("bookmarks")
400
-
401
- .doc(id)
402
-
403
- .set({
404
-
405
- bookmarkId: id,
406
-
407
- ...this.list,
408
-
409
- time: firebase.firestore.FieldValue.serverTimestamp()
410
-
411
- })
412
-
413
- .then(() => {
414
-
415
- this.$swal("ブックマークに追加しました。", {
416
-
417
- icon: "success"
418
-
419
- });
420
-
421
- })
422
-
423
- .catch(() => {
424
-
425
- this.$swal("ブックマークを追加出来ません。", {
426
-
427
- icon: "error"
428
-
429
- });
430
-
431
- });
432
-
433
- },
434
-
435
-
436
-
437
- deleteBookmark() {
438
-
439
- firebase
440
-
441
- .firestore()
442
-
443
- .collection("users")
444
-
445
- .doc(this.$route.params.uid)
446
-
447
- .collection("bookmarks")
448
-
449
- .doc(this.list.bookmarkId)
450
-
451
- .delete()
452
-
453
- .then(() => {
454
-
455
- this.$swal("ブックマークを取り消ししました。", {
456
-
457
- icon: "success"
458
-
459
- });
460
-
461
- this.$router.go({
462
-
463
- path: `/bookmark/${this.$route.params.uid}`,
464
-
465
- force: true
466
-
467
- });
468
-
469
- })
470
-
471
- .catch(() => {
472
-
473
- this.$swal("ブックマークを取り消し出来ません。", {
474
-
475
- icon: "error"
476
-
477
- });
478
-
479
- });
480
-
481
- }
482
-
483
- };
484
-
485
- </script>
486
-
487
- ```
715
+ ```
488
-
489
-
490
-
491
- #エラーコード
716
+
492
-
493
-
494
-
717
+
718
+
495
- ![イメージ説明](5eabcd50d1c607032f4ceceb15b88466.png)
719
+ 原因分かる方いらっしゃいましたらお力添えを頂きたいです。
720
+
721
+
722
+
723
+ よろしくお願いいたします。

4

内容変更、追記

2021/06/15 13:45

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,188 @@
42
42
 
43
43
  よろしくお願いいたします。
44
44
 
45
+
46
+
47
+ #追記1
48
+
49
+
50
+
51
+
52
+
53
+ ```ここに言語を入力
54
+
55
+ vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "bookmarkList"
56
+
57
+
58
+
59
+ found in
60
+
61
+
62
+
63
+ ---> <List>
64
+
65
+ <Paginate>
66
+
67
+ <Anonymous>
68
+
69
+ <App> at src/App.vue
70
+
71
+ <Root>
72
+
73
+ ```
74
+
75
+
76
+
77
+ ![イメージ説明](a164b27c60e2cc3f9190f602e96f03c3.png)
78
+
79
+
80
+
81
+ #追記2
82
+
83
+
84
+
85
+ 色々調べておりましたら親から子へデータをpropsで渡す際に
86
+
87
+
88
+
89
+ ```
90
+
91
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmarkList="bookmarklist" :key="list.id"/>
92
+
93
+ ```
94
+
95
+
96
+
97
+ としておりましたが、子で受ける際はキャメルケースでは「undefined」となるようなので以下のようにしました。
98
+
99
+
100
+
101
+ ```
102
+
103
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmark="bookmarklist" :key="list.id"/>
104
+
105
+ ```
106
+
107
+
108
+
109
+ 参考記事:[【Vue.js】propsで子コンポーネントにデータが渡らないのはHTMLの命名規則が原因だった](https://qiita.com/_Keitaro_/items/f77d2340f9390f028677)
110
+
111
+
112
+
113
+
114
+
115
+ #bookmark.vue
116
+
117
+
118
+
119
+ ```
120
+
121
+ <template>
122
+
123
+ <div>
124
+
125
+ <Header />
126
+
127
+ <div class="bookmarkList flex">
128
+
129
+ <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
130
+
131
+ <hr class="separate" />
132
+
133
+ <div class="bookmarkList-posts">
134
+
135
+ <paginate
136
+
137
+ name="paginate-bookmarkList"
138
+
139
+ class="paginate-pctb"
140
+
141
+ tag="ol"
142
+
143
+ :list="bookmarkList"
144
+
145
+ :per="3"
146
+
147
+ v-if="bookmarkList.length !== 0"
148
+
149
+ >
150
+
151
+ <List
152
+
153
+ v-for="(list) in paginated('paginate-bookmarkList')"
154
+
155
+ :list="list"
156
+
157
+ :bookmark="bookmarklist"
158
+
159
+ :key="list.id"
160
+
161
+ />
162
+
163
+ </paginate>
164
+
165
+ <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
166
+
167
+ <paginate-links
168
+
169
+ for="paginate-bookmarkList"
170
+
171
+ name="paginate-bookmarkList"
172
+
173
+ :async="true"
174
+
175
+ class="pagination paginate-pctb flex"
176
+
177
+ :show-step-links="true"
178
+
179
+ :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
180
+
181
+ ></paginate-links>
182
+
183
+ </div>
184
+
185
+ </div>
186
+
187
+ </div>
188
+
189
+ </template>
190
+
191
+ ```
192
+
193
+
194
+
195
+ ```
196
+
197
+ export default {
198
+
199
+ data() {
200
+
201
+ return
202
+
203
+ paginate: ["paginate-bookmarkList"],
204
+
205
+ bookmarkList: []
206
+
207
+ };
208
+
209
+ },
210
+
211
+ components: {
212
+
213
+ Header,
214
+
215
+ List
216
+
217
+ },
218
+
219
+ };
220
+
221
+ </script>
222
+
223
+ ```
224
+
225
+
226
+
45
227
  #list.vue
46
228
 
47
229
 
@@ -90,10 +272,20 @@
90
272
 
91
273
  <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
92
274
 
93
- <img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" />
94
-
95
275
  <img
96
276
 
277
+ src="../assets/ブックマーク保存.jpg"
278
+
279
+ alt="ブックマーク"
280
+
281
+ class="bookmark-icon"
282
+
283
+ @click="saveBookmark"
284
+
285
+ />
286
+
287
+ <img
288
+
97
289
  src="../assets/ブックマーク未保存.jpg"
98
290
 
99
291
  alt="ブックマーク"
@@ -118,9 +310,61 @@
118
310
 
119
311
 
120
312
 
313
+ ```
314
+
315
+ export default {
316
+
317
+ data() {
318
+
319
+ return {
320
+
321
+ bookmarkId: "",
322
+
323
+ preview: require("../assets/デフォルト画像.jpg")
324
+
325
+ };
326
+
327
+ },
328
+
329
+ props: {
330
+
331
+ list: {
332
+
333
+ type: Object,
334
+
335
+ required: true
336
+
337
+ },
338
+
339
+ index: {
340
+
341
+ type: Number
342
+
343
+ },
344
+
121
- ```ここに言語を入力
345
+ bookmark: {
346
+
122
-
347
+ type: Object,
348
+
349
+ required: true,
350
+
351
+ default:() => {}, //修正箇所
352
+
353
+ }
354
+
355
+ },
356
+
357
+
358
+
123
- methods: {
359
+ methods: {
360
+
361
+
362
+
363
+ hasBookmark(book) { //追加
364
+
365
+ return this.bookmark.some(value => value.id === book.id);
366
+
367
+ },
124
368
 
125
369
 
126
370
 
@@ -234,175 +478,7 @@
234
478
 
235
479
  });
236
480
 
237
- },
238
-
239
- ```
240
-
241
-
242
-
243
- #bookmark.vue
244
-
245
-
246
-
247
- ```ここに言語を入力
248
-
249
- <template>
250
-
251
- <div>
252
-
253
- <Header />
254
-
255
- <div class="bookmarkList flex">
256
-
257
- <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
258
-
259
- <hr class="separate" />
260
-
261
- <div class="bookmarkList-posts">
262
-
263
- <!-- PC・タブレット用ページネーション -->
264
-
265
- <paginate
266
-
267
- name="paginate-bookmarkList"
268
-
269
- class="paginate-pctb"
270
-
271
- tag="ol"
272
-
273
- :list="bookmarkList"
274
-
275
- :per="3"
276
-
277
- v-if="bookmarkList.length !== 0"
278
-
279
- >
280
-
281
- <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
282
-
283
- </paginate>
284
-
285
-
286
-
287
- <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
288
-
289
- <paginate-links
290
-
291
- for="paginate-bookmarkList"
292
-
293
- name="paginate-bookmarkList"
294
-
295
- :async="true"
296
-
297
- class="pagination paginate-pctb flex"
298
-
299
- :show-step-links="true"
300
-
301
- :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
302
-
303
- ></paginate-links>
304
-
305
- </div>
306
-
307
- </div>
308
-
309
- </div>
310
-
311
- </template>
312
-
313
- ```
314
-
315
-
316
-
317
- ```
318
-
319
- <script>
320
-
321
- import firebase from "firebase";
322
-
323
- import Header from "@/components/header.vue";
324
-
325
- import List from "@/components/list.vue";
326
-
327
- import Vue from "vue";
328
-
329
- import VuePaginate from "vue-paginate";
330
-
331
- Vue.use(VuePaginate);
332
-
333
-
334
-
335
- export default {
336
-
337
- data() {
338
-
339
- return {
340
-
341
- profileData: {},
342
-
343
- paginate: ["paginate-bookmarkList"],
344
-
345
- bookmarkList: []
346
-
347
- };
348
-
349
- },
350
-
351
- components: {
352
-
353
- Header,
354
-
355
- List
356
-
357
- },
358
-
359
-
360
-
361
- created() {
362
-
363
- firebase
364
-
365
- .firestore()
366
-
367
- .collection("users")
368
-
369
- .doc(this.$route.params.uid)
370
-
371
- .get()
372
-
373
- .then(snapshot => {
374
-
375
- this.profileData = snapshot.data();
376
-
377
- });
378
-
379
-
380
-
381
- firebase
382
-
383
- .firestore()
384
-
385
- .collection("users")
386
-
387
- .doc(this.$route.params.uid)
388
-
389
- .collection("bookmarks")
390
-
391
- .orderBy("time", "desc")
392
-
393
- .get()
394
-
395
- .then(snapshot => {
396
-
397
- snapshot.forEach(doc => {
398
-
399
- this.bookmarkList.push(doc.data());
400
-
401
- });
402
-
403
- });
404
-
405
- }
481
+ }
406
482
 
407
483
  };
408
484
 
@@ -412,244 +488,8 @@
412
488
 
413
489
 
414
490
 
415
- #追記1
416
-
417
-
418
-
419
- ####bookmark.vue
420
-
421
-
422
-
423
- ```ここに言語を入力
424
-
425
- <div class="bookmarkList-posts">
426
-
427
- <!-- PC・タブレット用ページネーション -->
428
-
429
- <paginate
430
-
431
- name="paginate-bookmarkList"
432
-
433
- class="paginate-pctb"
434
-
435
- tag="ol"
436
-
437
- :list="bookmarkList"
438
-
439
- :per="3"
440
-
441
- v-if="bookmarkList.length !== 0"
442
-
443
- >
444
-
445
- <List
446
-
447
- v-for="(list) in paginated('paginate-bookmarkList')"
448
-
449
- :list="list"
450
-
451
- :bookmarkList="bookmarkList"
452
-
453
- :key="list.id"
454
-
455
- />
456
-
457
- </paginate>
458
-
459
- ```
460
-
461
-
462
-
463
- ```ここに言語を入力
464
-
465
-
466
-
467
- export default {
468
-
469
- data() {
470
-
471
- return {
472
-
473
- profileData: {},
474
-
475
- paginate: ["paginate-bookmarkList"],
476
-
477
- bookmarkList: []
478
-
479
- };
480
-
481
- },
482
-
483
- components: {
484
-
485
- Header,
491
+ #エラーコード
486
-
487
- List
492
+
488
-
489
- },
493
+
490
-
491
- ```
494
+
492
-
493
-
494
-
495
- ####list.vue
496
-
497
-
498
-
499
- ```ここに言語を入力
500
-
501
- <template>
502
-
503
- <div class="list">
504
-
505
- <div class="face face1 flex">
506
-
507
- <div class="content">
508
-
509
- <img
510
-
511
- class="profile-icon"
512
-
513
- width="50"
514
-
515
- height="50"
516
-
517
- :src="
518
-
519
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
520
-
521
- "
522
-
523
- />
524
-
525
- <h3>{{ list.title }}</h3>
526
-
527
- {{bookmarkList}}
528
-
529
- </div>
530
-
531
- </div>
532
-
533
- <div class="face face2 flex">
534
-
535
- <div class="content flex">
536
-
537
- <button class="hide-btn" @click="deletePost">×</button>
538
-
539
- <p>{{ list.description }}</p>
540
-
541
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
542
-
543
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
544
-
545
- <img
546
-
547
- src="../assets/ブックマーク保存.jpg"
548
-
549
- alt="ブックマーク"
550
-
551
- class="bookmark-icon"
552
-
553
- @click="saveBookmark"
554
-
555
- />
556
-
557
- <img
558
-
559
- src="../assets/ブックマーク未保存.jpg"
560
-
561
- alt="ブックマーク"
562
-
563
- class="bookmark-icon"
564
-
565
- @click="deleteBookmark"
566
-
567
- />
568
-
569
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
570
-
571
- </div>
572
-
573
- </div>
574
-
575
- </div>
576
-
577
- </template>
578
-
579
- ```
580
-
581
-
582
-
583
- ```
584
-
585
- export default {
586
-
587
- data() {
588
-
589
- return {
590
-
591
- bookmarkId: "",
592
-
593
- userDatas: [],
594
-
595
- preview: require("../assets/デフォルト画像.jpg")
596
-
597
- };
598
-
599
- },
600
-
601
- props: {
602
-
603
- list: {
604
-
605
- type: Object,
606
-
607
- required: true
608
-
609
- },
610
-
611
- index: {
612
-
613
- type: Number
614
-
615
- },
616
-
617
- bookmarkList: {
618
-
619
- type: Array,
620
-
621
- required: true
622
-
623
- }
624
-
625
- },
626
-
627
- ```
628
-
629
-
630
-
631
- ```ここに言語を入力
632
-
633
- vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "bookmarkList"
634
-
635
-
636
-
637
- found in
638
-
639
-
640
-
641
- ---> <List>
642
-
643
- <Paginate>
644
-
645
- <Anonymous>
646
-
647
- <App> at src/App.vue
648
-
649
- <Root>
650
-
651
- ```
652
-
653
-
654
-
655
- ![イメージ説明](a164b27c60e2cc3f9190f602e96f03c3.png)
495
+ ![イメージ説明](5eabcd50d1c607032f4ceceb15b88466.png)

3

画像追加

2021/06/10 23:07

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -649,3 +649,7 @@
649
649
  <Root>
650
650
 
651
651
  ```
652
+
653
+
654
+
655
+ ![イメージ説明](a164b27c60e2cc3f9190f602e96f03c3.png)

2

追記1追加

2021/06/10 16:13

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -409,3 +409,243 @@
409
409
  </script>
410
410
 
411
411
  ```
412
+
413
+
414
+
415
+ #追記1
416
+
417
+
418
+
419
+ ####bookmark.vue
420
+
421
+
422
+
423
+ ```ここに言語を入力
424
+
425
+ <div class="bookmarkList-posts">
426
+
427
+ <!-- PC・タブレット用ページネーション -->
428
+
429
+ <paginate
430
+
431
+ name="paginate-bookmarkList"
432
+
433
+ class="paginate-pctb"
434
+
435
+ tag="ol"
436
+
437
+ :list="bookmarkList"
438
+
439
+ :per="3"
440
+
441
+ v-if="bookmarkList.length !== 0"
442
+
443
+ >
444
+
445
+ <List
446
+
447
+ v-for="(list) in paginated('paginate-bookmarkList')"
448
+
449
+ :list="list"
450
+
451
+ :bookmarkList="bookmarkList"
452
+
453
+ :key="list.id"
454
+
455
+ />
456
+
457
+ </paginate>
458
+
459
+ ```
460
+
461
+
462
+
463
+ ```ここに言語を入力
464
+
465
+
466
+
467
+ export default {
468
+
469
+ data() {
470
+
471
+ return {
472
+
473
+ profileData: {},
474
+
475
+ paginate: ["paginate-bookmarkList"],
476
+
477
+ bookmarkList: []
478
+
479
+ };
480
+
481
+ },
482
+
483
+ components: {
484
+
485
+ Header,
486
+
487
+ List
488
+
489
+ },
490
+
491
+ ```
492
+
493
+
494
+
495
+ ####list.vue
496
+
497
+
498
+
499
+ ```ここに言語を入力
500
+
501
+ <template>
502
+
503
+ <div class="list">
504
+
505
+ <div class="face face1 flex">
506
+
507
+ <div class="content">
508
+
509
+ <img
510
+
511
+ class="profile-icon"
512
+
513
+ width="50"
514
+
515
+ height="50"
516
+
517
+ :src="
518
+
519
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
520
+
521
+ "
522
+
523
+ />
524
+
525
+ <h3>{{ list.title }}</h3>
526
+
527
+ {{bookmarkList}}
528
+
529
+ </div>
530
+
531
+ </div>
532
+
533
+ <div class="face face2 flex">
534
+
535
+ <div class="content flex">
536
+
537
+ <button class="hide-btn" @click="deletePost">×</button>
538
+
539
+ <p>{{ list.description }}</p>
540
+
541
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
542
+
543
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
544
+
545
+ <img
546
+
547
+ src="../assets/ブックマーク保存.jpg"
548
+
549
+ alt="ブックマーク"
550
+
551
+ class="bookmark-icon"
552
+
553
+ @click="saveBookmark"
554
+
555
+ />
556
+
557
+ <img
558
+
559
+ src="../assets/ブックマーク未保存.jpg"
560
+
561
+ alt="ブックマーク"
562
+
563
+ class="bookmark-icon"
564
+
565
+ @click="deleteBookmark"
566
+
567
+ />
568
+
569
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
570
+
571
+ </div>
572
+
573
+ </div>
574
+
575
+ </div>
576
+
577
+ </template>
578
+
579
+ ```
580
+
581
+
582
+
583
+ ```
584
+
585
+ export default {
586
+
587
+ data() {
588
+
589
+ return {
590
+
591
+ bookmarkId: "",
592
+
593
+ userDatas: [],
594
+
595
+ preview: require("../assets/デフォルト画像.jpg")
596
+
597
+ };
598
+
599
+ },
600
+
601
+ props: {
602
+
603
+ list: {
604
+
605
+ type: Object,
606
+
607
+ required: true
608
+
609
+ },
610
+
611
+ index: {
612
+
613
+ type: Number
614
+
615
+ },
616
+
617
+ bookmarkList: {
618
+
619
+ type: Array,
620
+
621
+ required: true
622
+
623
+ }
624
+
625
+ },
626
+
627
+ ```
628
+
629
+
630
+
631
+ ```ここに言語を入力
632
+
633
+ vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "bookmarkList"
634
+
635
+
636
+
637
+ found in
638
+
639
+
640
+
641
+ ---> <List>
642
+
643
+ <Paginate>
644
+
645
+ <Anonymous>
646
+
647
+ <App> at src/App.vue
648
+
649
+ <Root>
650
+
651
+ ```

1

内容変更

2021/06/10 16:08

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  よろしくお願いいたします。
44
44
 
45
+ #list.vue
46
+
45
47
 
46
48
 
47
49
  ```ここに言語を入力
@@ -235,3 +237,175 @@
235
237
  },
236
238
 
237
239
  ```
240
+
241
+
242
+
243
+ #bookmark.vue
244
+
245
+
246
+
247
+ ```ここに言語を入力
248
+
249
+ <template>
250
+
251
+ <div>
252
+
253
+ <Header />
254
+
255
+ <div class="bookmarkList flex">
256
+
257
+ <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
258
+
259
+ <hr class="separate" />
260
+
261
+ <div class="bookmarkList-posts">
262
+
263
+ <!-- PC・タブレット用ページネーション -->
264
+
265
+ <paginate
266
+
267
+ name="paginate-bookmarkList"
268
+
269
+ class="paginate-pctb"
270
+
271
+ tag="ol"
272
+
273
+ :list="bookmarkList"
274
+
275
+ :per="3"
276
+
277
+ v-if="bookmarkList.length !== 0"
278
+
279
+ >
280
+
281
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
282
+
283
+ </paginate>
284
+
285
+
286
+
287
+ <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
288
+
289
+ <paginate-links
290
+
291
+ for="paginate-bookmarkList"
292
+
293
+ name="paginate-bookmarkList"
294
+
295
+ :async="true"
296
+
297
+ class="pagination paginate-pctb flex"
298
+
299
+ :show-step-links="true"
300
+
301
+ :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
302
+
303
+ ></paginate-links>
304
+
305
+ </div>
306
+
307
+ </div>
308
+
309
+ </div>
310
+
311
+ </template>
312
+
313
+ ```
314
+
315
+
316
+
317
+ ```
318
+
319
+ <script>
320
+
321
+ import firebase from "firebase";
322
+
323
+ import Header from "@/components/header.vue";
324
+
325
+ import List from "@/components/list.vue";
326
+
327
+ import Vue from "vue";
328
+
329
+ import VuePaginate from "vue-paginate";
330
+
331
+ Vue.use(VuePaginate);
332
+
333
+
334
+
335
+ export default {
336
+
337
+ data() {
338
+
339
+ return {
340
+
341
+ profileData: {},
342
+
343
+ paginate: ["paginate-bookmarkList"],
344
+
345
+ bookmarkList: []
346
+
347
+ };
348
+
349
+ },
350
+
351
+ components: {
352
+
353
+ Header,
354
+
355
+ List
356
+
357
+ },
358
+
359
+
360
+
361
+ created() {
362
+
363
+ firebase
364
+
365
+ .firestore()
366
+
367
+ .collection("users")
368
+
369
+ .doc(this.$route.params.uid)
370
+
371
+ .get()
372
+
373
+ .then(snapshot => {
374
+
375
+ this.profileData = snapshot.data();
376
+
377
+ });
378
+
379
+
380
+
381
+ firebase
382
+
383
+ .firestore()
384
+
385
+ .collection("users")
386
+
387
+ .doc(this.$route.params.uid)
388
+
389
+ .collection("bookmarks")
390
+
391
+ .orderBy("time", "desc")
392
+
393
+ .get()
394
+
395
+ .then(snapshot => {
396
+
397
+ snapshot.forEach(doc => {
398
+
399
+ this.bookmarkList.push(doc.data());
400
+
401
+ });
402
+
403
+ });
404
+
405
+ }
406
+
407
+ };
408
+
409
+ </script>
410
+
411
+ ```