質問編集履歴

4

内容修正

2021/06/09 07:42

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- コンネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
1
+ Firestoreのサブレクショにデタが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい
test CHANGED
@@ -1,4 +1,4 @@
1
- #コンネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
1
+ #Firestoreのサブレクショにデタが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい
2
2
 
3
3
 
4
4
 
@@ -8,6 +8,28 @@
8
8
 
9
9
  現在ブックマーク機能を導入したく、写真の投稿左下にボタンを設置しており、
10
10
 
11
+ そのボタンに対して「saveBookmark(ブックマークを保存)」と「deletebookmark(ブックマークを削除)」の二つのメソッドを持たせている状態です。
12
+
13
+
14
+
15
+ そこでFirestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたいです。
16
+
17
+
18
+
19
+ どのように分岐したら実現できるか分からず行き詰っております・・
20
+
21
+
22
+
23
+ また、理想としては実現できるか別として以下のように親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に
24
+
25
+ 切替できるのであれば、そちらを実装したいと考えております。
26
+
27
+
28
+
29
+ ####親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
30
+
31
+
32
+
11
33
 
12
34
 
13
35
  board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
@@ -16,9 +38,7 @@
16
38
 
17
39
 
18
40
 
19
- それぞれのメソッドは実装できているのですが、
41
+ ---
20
-
21
- どのようにして更新するのか分からず行き詰まってしまっております。
22
42
 
23
43
 
24
44
 
@@ -26,6 +46,10 @@
26
46
 
27
47
 
28
48
 
49
+ またもっと良い方法があればご教示頂けると幸いです。
50
+
51
+
52
+
29
53
  よろしくお願いいたします。
30
54
 
31
55
 

3

内容修正

2021/06/09 07:42

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -6,11 +6,13 @@
6
6
 
7
7
 
8
8
 
9
- ブックマーク機能を導入したく、写真の投稿左下にボタンを設置し、
9
+ 現在ブックマーク機能を導入したく、写真の投稿左下にボタンを設置しており
10
+
11
+
10
12
 
11
13
  board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
12
14
 
13
- bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにメソッドを更新しいです。
15
+ bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにしてメソッドを更新しいです。
14
16
 
15
17
 
16
18
 

2

内容修正

2021/06/09 04:02

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- Firestoreにてレクショ内に対象ドキュメントが存在しない場合は保存、存在する場合は削除をしたい
1
+ コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
test CHANGED
@@ -1,4 +1,4 @@
1
- #コレクショ内に対象ドキュメントが存在しない場合は保存、存在する場合は削除をしたい
1
+ #コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
2
2
 
3
3
 
4
4
 
@@ -8,45 +8,345 @@
8
8
 
9
9
  ブックマーク機能を導入したく、写真の投稿左下にボタンを設置し、
10
10
 
11
- コレショ対象ドキュメントが存在ない場合は保存、存在する場合は削除をしたいと考えいます。
11
+ board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブッマークを保存)ボタンにして
12
+
13
+ bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにメソッドを更新していです。
12
14
 
13
15
 
14
16
 
15
17
  それぞれのメソッドは実装できているのですが、
16
18
 
17
- どのようにして分岐して実装をればいいのか分からず行き詰まってしまっております。
19
+ どのようにして更新のか分からず行き詰まってしまっております。
18
-
19
-
20
-
20
+
21
+
22
+
21
- そもそも@clickイベントにメソッドを2つ合わせのはあり良くなしょうか
23
+ 分か方いらっしゃいしたらお力添えをただきたい
24
+
25
+
26
+
27
+ よろしくお願いいたします。
28
+
29
+
30
+
31
+ #list.vue(子コンポーネント)
22
32
 
23
33
 
24
34
 
25
35
  ```html
26
36
 
37
+ <template>
38
+
39
+ <div class="list">
40
+
41
+ <div class="face face1 flex">
42
+
43
+ <div class="content">
44
+
45
+ <img
46
+
47
+ class="profile-icon"
48
+
49
+ width="50"
50
+
51
+ height="50"
52
+
53
+ :src="
54
+
55
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
56
+
57
+ "
58
+
59
+ />
60
+
61
+ <h3>{{ list.title }}</h3>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ <div class="face face2 flex">
68
+
69
+ <div class="content flex">
70
+
71
+ <button class="hide-btn" @click="deletePost">×</button>
72
+
73
+ <p>{{ list.description }}</p>
74
+
27
- <img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark();deleteBookmark();"/>
75
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
76
+
77
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
78
+
79
+ <img
80
+
81
+ src="../assets/ブックマーク.jpg"
82
+
83
+ alt="ブックマーク"
84
+
85
+ class="bookmark-icon"
86
+
87
+ @click="saveBookmark"
88
+
89
+ />
90
+
91
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+ </template>
28
100
 
29
101
  ```
30
102
 
31
103
 
32
104
 
33
- 理想としては、board.vue(投稿一覧ページ)では、投稿の左下のボタンをsavebookmark()メソッドに
34
-
35
- bookmark.vue(ブックマーク一覧ページ)では投稿の左下のボタンをdeletebookmark()メソッド
36
-
37
- 切り替えができる方法があれば理想です・・
38
-
39
-
40
-
41
- 分かる方いらっしゃいましたらお力添えをいただきたいです。
42
-
43
-
44
-
45
- よろしくお願いいたします。
46
-
47
-
48
-
49
- #list.vue(親コンポーネント)
105
+ ```js
106
+
107
+ <script>
108
+
109
+ import firebase from "firebase";
110
+
111
+ import Vue from "vue";
112
+
113
+ import VueSwal from "vue-swal";
114
+
115
+ Vue.use(VueSwal);
116
+
117
+ export default {
118
+
119
+ data() {
120
+
121
+ return {
122
+
123
+ bookmarkId: "",
124
+
125
+ userDatas: [],
126
+
127
+ preview: require("../assets/デフォルト画像.jpg")
128
+
129
+ };
130
+
131
+ },
132
+
133
+ props: {
134
+
135
+ list: {
136
+
137
+ type: Object,
138
+
139
+ required: true
140
+
141
+ },
142
+
143
+ index: {
144
+
145
+ type: Number
146
+
147
+ }
148
+
149
+ },
150
+
151
+ created() {
152
+
153
+ firebase
154
+
155
+ .firestore()
156
+
157
+ .collection("users")
158
+
159
+ .get()
160
+
161
+ .then(snapshot => {
162
+
163
+ snapshot.forEach(doc => {
164
+
165
+ this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
166
+
167
+ });
168
+
169
+ });
170
+
171
+ },
172
+
173
+ methods: {
174
+
175
+ returnUserData() {
176
+
177
+ const userData = this.userDatas.find(
178
+
179
+ tmpUserData => this.list.uid === tmpUserData.uid
180
+
181
+ );
182
+
183
+ //this.userDatas(配列)に入っている値(uid)は、userDatas.uidとしても直接取れない為、tmpUserDataの引数に渡してからuidを取得する
184
+
185
+ //そのuidとidが一致したものを一つuserData(配列)へ格納。
186
+
187
+ return userData;
188
+
189
+ },
190
+
191
+ saveBookmark() {
192
+
193
+ const ref = firebase
194
+
195
+ .firestore()
196
+
197
+ .collection("users")
198
+
199
+ .doc(this.$route.params.uid)
200
+
201
+ .collection("bookmarks")
202
+
203
+ .doc();
204
+
205
+ const id = ref.id;
206
+
207
+ firebase
208
+
209
+ .firestore()
210
+
211
+ .collection("users")
212
+
213
+ .doc(this.$route.params.uid)
214
+
215
+ .collection("bookmarks")
216
+
217
+ .doc(id)
218
+
219
+ .set({
220
+
221
+ bookmarkId: id,
222
+
223
+ ...this.list,
224
+
225
+ time: firebase.firestore.FieldValue.serverTimestamp()
226
+
227
+ })
228
+
229
+ .then(() => {
230
+
231
+ this.$swal("ブックマークに追加しました。", {
232
+
233
+ icon: "success"
234
+
235
+ });
236
+
237
+ })
238
+
239
+ .catch(() => {
240
+
241
+ this.$swal("ブックマークを追加出来ません。", {
242
+
243
+ icon: "error"
244
+
245
+ });
246
+
247
+ });
248
+
249
+ },
250
+
251
+
252
+
253
+ deletePost() {
254
+
255
+ const currentUser = firebase.auth().currentUser;
256
+
257
+ this.uid = currentUser.uid;
258
+
259
+ if (this.list.uid == this.uid) {
260
+
261
+ this.$swal({
262
+
263
+ title: "内容確認",
264
+
265
+ text: "投稿を削除しますか?",
266
+
267
+ icon: "warning",
268
+
269
+ buttons: true,
270
+
271
+ dangerMode: true
272
+
273
+ })
274
+
275
+ .then(willDelete => {
276
+
277
+ if (willDelete) {
278
+
279
+ firebase
280
+
281
+ .firestore()
282
+
283
+ .collection("posts")
284
+
285
+ .doc(this.list.id)
286
+
287
+ .delete()
288
+
289
+ .then(() => {
290
+
291
+ this.$swal("投稿を削除しました", {
292
+
293
+ icon: "success"
294
+
295
+ });
296
+
297
+ this.$router.go({
298
+
299
+ path: `/board/${this.$route.params.uid}`,
300
+
301
+ force: true
302
+
303
+ });
304
+
305
+ })
306
+
307
+ .catch(() => {
308
+
309
+ this.$swal("投稿を削除出来ません。", {
310
+
311
+ icon: "error"
312
+
313
+ });
314
+
315
+ });
316
+
317
+ } else {
318
+
319
+ this.$swal("キャンセルしました。");
320
+
321
+ }
322
+
323
+ })
324
+
325
+ .catch(() => {
326
+
327
+ this.$swal("投稿を削除出来ません。", {
328
+
329
+ icon: "error"
330
+
331
+ });
332
+
333
+ });
334
+
335
+ }
336
+
337
+ }
338
+
339
+ }
340
+
341
+ };
342
+
343
+ </script>
344
+
345
+ ```
346
+
347
+
348
+
349
+ #bookmark.vue(ブックマーク一覧ページ)
50
350
 
51
351
 
52
352
 
@@ -54,64 +354,56 @@
54
354
 
55
355
  <template>
56
356
 
357
+ <div>
358
+
57
- <div class="list">
359
+ <Header />
58
-
360
+
59
- <div class="face face1 flex">
361
+ <div class="bookmarkList flex">
362
+
60
-
363
+ <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
364
+
365
+ <hr class="separate" />
366
+
61
- <div class="content">
367
+ <div class="bookmarkList-posts">
62
-
368
+
63
- <img
369
+ <paginate
64
-
370
+
65
- class="profile-icon"
371
+ name="paginate-bookmarkList"
66
-
67
- width="50"
372
+
68
-
69
- height="50"
373
+ tag="ol"
374
+
70
-
375
+ :list="bookmarkList"
376
+
71
- :src="
377
+ :per="3"
72
-
378
+
73
- returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
379
+ v-if="bookmarkList.length !== 0"
74
-
380
+
75
- "
381
+ >
382
+
76
-
383
+ <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
384
+
77
- />
385
+ </paginate>
386
+
387
+
388
+
78
-
389
+ <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
390
+
391
+ <paginate-links
392
+
393
+ for="paginate-bookmarkList"
394
+
395
+ class="pagination flex"
396
+
397
+ :show-step-links="true"
398
+
399
+ :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
400
+
79
- <h3>{{ list.title }}</h3>
401
+ ></paginate-links>
80
402
 
81
403
  </div>
82
404
 
83
405
  </div>
84
406
 
85
- <div class="face face2 flex">
86
-
87
- <div class="content flex">
88
-
89
- <button class="hide-btn" @click="deletePost">×</button>
90
-
91
- <p>{{ list.description }}</p>
92
-
93
- <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
94
-
95
- <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
96
-
97
- <img
98
-
99
- src="../assets/ブックマーク.jpg"
100
-
101
- alt="ブックマーク"
102
-
103
- class="bookmark-icon"
104
-
105
- @click="saveBookmark();deleteBookmark();"
106
-
107
- />
108
-
109
- <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
110
-
111
- </div>
112
-
113
- </div>
114
-
115
407
  </div>
116
408
 
117
409
  </template>
@@ -126,11 +418,17 @@
126
418
 
127
419
  import firebase from "firebase";
128
420
 
421
+ import Header from "@/components/header.vue";
422
+
423
+ import List from "@/components/list.vue";
424
+
129
425
  import Vue from "vue";
130
426
 
131
- import VueSwal from "vue-swal";
427
+ import VuePaginate from "vue-paginate";
132
-
428
+
133
- Vue.use(VueSwal);
429
+ Vue.use(VuePaginate);
430
+
431
+
134
432
 
135
433
  export default {
136
434
 
@@ -138,444 +436,128 @@
138
436
 
139
437
  return {
140
438
 
141
- bookmarkId: "",
142
-
143
- userDatas: [],
439
+ profileData: {},
144
-
440
+
145
- preview: require("../assets/デフォルト画像.jpg")
441
+ paginate: ["paginate-bookmarkList"],
442
+
443
+ bookmarkList: []
146
444
 
147
445
  };
148
446
 
149
447
  },
150
448
 
449
+ components: {
450
+
451
+ Header,
452
+
453
+ List
454
+
455
+ },
456
+
457
+
458
+
151
- props: {
459
+ methods: {
460
+
152
-
461
+ deleteBookmark() {
462
+
463
+ firebase
464
+
465
+ .firestore()
466
+
467
+ .collection("users")
468
+
469
+ .doc(this.$route.params.uid)
470
+
471
+ .collection("bookmarks")
472
+
473
+ .doc(this.list.bookmarkId)
474
+
475
+ .delete()
476
+
477
+ .then(() => {
478
+
479
+ this.$swal("ブックマークを取り消ししました。", {
480
+
481
+ icon: "success"
482
+
483
+ });
484
+
485
+ this.$router.go({
486
+
153
- //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す
487
+ path: `/bookmark/${this.$route.params.uid}`,
154
-
155
- list: {
488
+
156
-
157
- type: Object,
158
-
159
- required: true
489
+ force: true
490
+
160
-
491
+ });
492
+
493
+ })
494
+
495
+ .catch(() => {
496
+
161
- //親コンポーネント(board.vue)のlist[Object型]propsで渡ている
497
+ this.$swal("ブックマーク取り消出来ません", {
498
+
499
+ icon: "error"
500
+
501
+ });
502
+
503
+ });
162
504
 
163
505
  },
164
506
 
165
- index: {
166
-
167
- type: Number
168
-
169
- //親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
170
-
171
- }
172
-
173
- },
507
+ },
174
508
 
175
509
  created() {
176
510
 
511
+
512
+
177
513
  firebase
178
514
 
179
515
  .firestore()
180
516
 
181
517
  .collection("users")
182
518
 
519
+ .doc(this.$route.params.uid)
520
+
183
521
  .get()
184
522
 
185
523
  .then(snapshot => {
186
524
 
525
+ this.profileData = snapshot.data();
526
+
527
+ });
528
+
529
+
530
+
531
+ firebase
532
+
533
+ .firestore()
534
+
535
+ .collection("users")
536
+
537
+ .doc(this.$route.params.uid)
538
+
539
+ .collection("bookmarks")
540
+
541
+ .orderBy("time", "desc")
542
+
543
+ .get()
544
+
545
+ .then(snapshot => {
546
+
187
547
  snapshot.forEach(doc => {
188
548
 
189
- this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
549
+ this.bookmarkList.push(doc.data());
190
550
 
191
551
  });
192
552
 
193
553
  });
194
554
 
195
- },
196
-
197
- methods: {
198
-
199
- returnUserData() {
200
-
201
- const userData = this.userDatas.find(
202
-
203
- tmpUserData => this.list.uid === tmpUserData.uid
204
-
205
- );
206
-
207
- //this.userDatas(配列)に入っている値(uid)は、userDatas.uidとしても直接取れない為、tmpUserDataの引数に渡してからuidを取得する
208
-
209
- //そのuidとidが一致したものを一つuserData(配列)へ格納。
210
-
211
- return userData;
212
-
213
- },
214
-
215
- saveBookmark() {
216
-
217
- const ref = firebase
218
-
219
- .firestore()
220
-
221
- .collection("users")
222
-
223
- .doc(this.$route.params.uid)
224
-
225
- .collection("bookmarks")
226
-
227
- .doc();
228
-
229
- const id = ref.id;
230
-
231
- firebase
232
-
233
- .firestore()
234
-
235
- .collection("users")
236
-
237
- .doc(this.$route.params.uid)
238
-
239
- .collection("bookmarks")
240
-
241
- .doc(id)
242
-
243
- .set({
244
-
245
- bookmarkId: id,
246
-
247
- ...this.list,
248
-
249
- time: firebase.firestore.FieldValue.serverTimestamp()
250
-
251
- })
252
-
253
- .then(() => {
254
-
255
- this.$swal("ブックマークに追加しました。", {
256
-
257
- icon: "success"
258
-
259
- });
260
-
261
- })
262
-
263
- .catch(() => {
264
-
265
- this.$swal("ブックマークを追加出来ません。", {
266
-
267
- icon: "error"
268
-
269
- });
270
-
271
- });
272
-
273
- },
274
-
275
- deleteBookmark() {
276
-
277
- firebase
278
-
279
- .firestore()
280
-
281
- .collection("users")
282
-
283
- .doc(this.$route.params.uid)
284
-
285
- .collection("bookmarks")
286
-
287
- .doc(this.list.bookmarkId)
288
-
289
- .delete()
290
-
291
- .then(() => {
292
-
293
- this.$swal("ブックマークを取り消ししました。", {
294
-
295
- icon: "success"
296
-
297
- });
298
-
299
- this.$router.go({
300
-
301
- path: `/bookmark/${this.$route.params.uid}`,
302
-
303
- force: true
304
-
305
- });
306
-
307
- })
308
-
309
- .catch(() => {
310
-
311
- this.$swal("ブックマークを取り消し出来ません。", {
312
-
313
- icon: "error"
314
-
315
- });
316
-
317
- });
318
-
319
- },
320
-
321
- deletePost() {
322
-
323
- const currentUser = firebase.auth().currentUser;
324
-
325
- this.uid = currentUser.uid;
326
-
327
- if (this.list.uid == this.uid) {
328
-
329
- this.$swal({
330
-
331
- title: "内容確認",
332
-
333
- text: "投稿を削除しますか?",
334
-
335
- icon: "warning",
336
-
337
- buttons: true,
338
-
339
- dangerMode: true
340
-
341
- })
342
-
343
- .then(willDelete => {
344
-
345
- if (willDelete) {
346
-
347
- firebase
348
-
349
- .firestore()
350
-
351
- .collection("posts")
352
-
353
- .doc(this.list.id)
354
-
355
- .delete()
356
-
357
- .then(() => {
358
-
359
- this.$swal("投稿を削除しました", {
360
-
361
- icon: "success"
362
-
363
- });
364
-
365
- this.$router.go({
366
-
367
- path: `/board/${this.$route.params.uid}`,
368
-
369
- force: true
370
-
371
- });
372
-
373
- })
374
-
375
- .catch(() => {
376
-
377
- this.$swal("投稿を削除出来ません。", {
378
-
379
- icon: "error"
380
-
381
- });
382
-
383
- });
384
-
385
- } else {
386
-
387
- this.$swal("キャンセルしました。");
388
-
389
- }
390
-
391
- })
392
-
393
- .catch(() => {
394
-
395
- this.$swal("投稿を削除出来ません。", {
396
-
397
- icon: "error"
398
-
399
- });
400
-
401
- });
402
-
403
- }
404
-
405
- }
406
-
407
555
  }
408
556
 
409
557
  };
410
558
 
411
559
  </script>
412
560
 
561
+
562
+
413
563
  ```
414
-
415
-
416
-
417
- #bookmark.vue(ブックマーク一覧ページ)
418
-
419
-
420
-
421
- ```html
422
-
423
- <template>
424
-
425
- <div>
426
-
427
- <Header />
428
-
429
- <div class="bookmarkList flex">
430
-
431
- <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
432
-
433
- <hr class="separate" />
434
-
435
- <div class="bookmarkList-posts">
436
-
437
- <paginate
438
-
439
- name="paginate-bookmarkList"
440
-
441
- tag="ol"
442
-
443
- :list="bookmarkList"
444
-
445
- :per="3"
446
-
447
- v-if="bookmarkList.length !== 0"
448
-
449
- >
450
-
451
- <List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :key="list.id" />
452
-
453
- </paginate>
454
-
455
-
456
-
457
- <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
458
-
459
- <paginate-links
460
-
461
- for="paginate-bookmarkList"
462
-
463
- class="pagination flex"
464
-
465
- :show-step-links="true"
466
-
467
- :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
468
-
469
- ></paginate-links>
470
-
471
- </div>
472
-
473
- </div>
474
-
475
- </div>
476
-
477
- </template>
478
-
479
- ```
480
-
481
-
482
-
483
- ```js
484
-
485
- <script>
486
-
487
- import firebase from "firebase";
488
-
489
- import Header from "@/components/header.vue";
490
-
491
- import List from "@/components/list.vue";
492
-
493
- import Vue from "vue";
494
-
495
- import VuePaginate from "vue-paginate";
496
-
497
- Vue.use(VuePaginate);
498
-
499
-
500
-
501
- export default {
502
-
503
- data() {
504
-
505
- return {
506
-
507
- profileData: {},
508
-
509
- paginate: ["paginate-bookmarkList"],
510
-
511
- bookmarkList: []
512
-
513
- };
514
-
515
- },
516
-
517
- components: {
518
-
519
- Header,
520
-
521
- List
522
-
523
- },
524
-
525
-
526
-
527
- created() {
528
-
529
-
530
-
531
- firebase
532
-
533
- .firestore()
534
-
535
- .collection("users")
536
-
537
- .doc(this.$route.params.uid)
538
-
539
- .get()
540
-
541
- .then(snapshot => {
542
-
543
- this.profileData = snapshot.data();
544
-
545
- });
546
-
547
-
548
-
549
- firebase
550
-
551
- .firestore()
552
-
553
- .collection("users")
554
-
555
- .doc(this.$route.params.uid)
556
-
557
- .collection("bookmarks")
558
-
559
- .orderBy("time", "desc")
560
-
561
- .get()
562
-
563
- .then(snapshot => {
564
-
565
- snapshot.forEach(doc => {
566
-
567
- this.bookmarkList.push(doc.data());
568
-
569
- });
570
-
571
- });
572
-
573
- }
574
-
575
- };
576
-
577
- </script>
578
-
579
-
580
-
581
- ```

1

内容修正

2021/06/09 01:48

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -46,23 +46,171 @@
46
46
 
47
47
 
48
48
 
49
- #board.vue(投稿一覧ペ)
49
+ #list.vue(親コンポネント)
50
50
 
51
51
 
52
52
 
53
53
  ```html
54
54
 
55
+ <template>
56
+
57
+ <div class="list">
58
+
59
+ <div class="face face1 flex">
60
+
61
+ <div class="content">
62
+
63
+ <img
64
+
65
+ class="profile-icon"
66
+
67
+ width="50"
68
+
69
+ height="50"
70
+
71
+ :src="
72
+
73
+ returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
74
+
75
+ "
76
+
77
+ />
78
+
79
+ <h3>{{ list.title }}</h3>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ <div class="face face2 flex">
86
+
87
+ <div class="content flex">
88
+
89
+ <button class="hide-btn" @click="deletePost">×</button>
90
+
91
+ <p>{{ list.description }}</p>
92
+
55
- <img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark();deleteBookmark();"/>
93
+ <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
94
+
95
+ <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
96
+
97
+ <img
98
+
99
+ src="../assets/ブックマーク.jpg"
100
+
101
+ alt="ブックマーク"
102
+
103
+ class="bookmark-icon"
104
+
105
+ @click="saveBookmark();deleteBookmark();"
106
+
107
+ />
108
+
109
+ <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </template>
56
118
 
57
119
  ```
58
120
 
59
121
 
60
122
 
61
-
62
-
63
123
  ```js
64
124
 
125
+ <script>
126
+
127
+ import firebase from "firebase";
128
+
129
+ import Vue from "vue";
130
+
131
+ import VueSwal from "vue-swal";
132
+
133
+ Vue.use(VueSwal);
134
+
135
+ export default {
136
+
137
+ data() {
138
+
139
+ return {
140
+
141
+ bookmarkId: "",
142
+
143
+ userDatas: [],
144
+
145
+ preview: require("../assets/デフォルト画像.jpg")
146
+
147
+ };
148
+
149
+ },
150
+
151
+ props: {
152
+
153
+ //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す
154
+
155
+ list: {
156
+
157
+ type: Object,
158
+
159
+ required: true
160
+
161
+ //親コンポーネント(board.vue)のlist[Object型]をpropsで渡している。
162
+
163
+ },
164
+
165
+ index: {
166
+
167
+ type: Number
168
+
169
+ //親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
170
+
171
+ }
172
+
173
+ },
174
+
175
+ created() {
176
+
177
+ firebase
178
+
179
+ .firestore()
180
+
181
+ .collection("users")
182
+
183
+ .get()
184
+
185
+ .then(snapshot => {
186
+
187
+ snapshot.forEach(doc => {
188
+
189
+ this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
190
+
191
+ });
192
+
193
+ });
194
+
195
+ },
196
+
65
- methods: {
197
+ methods: {
198
+
199
+ returnUserData() {
200
+
201
+ const userData = this.userDatas.find(
202
+
203
+ tmpUserData => this.list.uid === tmpUserData.uid
204
+
205
+ );
206
+
207
+ //this.userDatas(配列)に入っている値(uid)は、userDatas.uidとしても直接取れない為、tmpUserDataの引数に渡してからuidを取得する
208
+
209
+ //そのuidとidが一致したものを一つuserData(配列)へ格納。
210
+
211
+ return userData;
212
+
213
+ },
66
214
 
67
215
  saveBookmark() {
68
216
 
@@ -78,12 +226,8 @@
78
226
 
79
227
  .doc();
80
228
 
81
-
82
-
83
229
  const id = ref.id;
84
230
 
85
-
86
-
87
231
  firebase
88
232
 
89
233
  .firestore()
@@ -128,8 +272,6 @@
128
272
 
129
273
  },
130
274
 
131
-
132
-
133
275
  deleteBookmark() {
134
276
 
135
277
  firebase
@@ -176,7 +318,97 @@
176
318
 
177
319
  },
178
320
 
321
+ deletePost() {
322
+
323
+ const currentUser = firebase.auth().currentUser;
324
+
325
+ this.uid = currentUser.uid;
326
+
327
+ if (this.list.uid == this.uid) {
328
+
329
+ this.$swal({
330
+
331
+ title: "内容確認",
332
+
333
+ text: "投稿を削除しますか?",
334
+
335
+ icon: "warning",
336
+
337
+ buttons: true,
338
+
339
+ dangerMode: true
340
+
179
- },
341
+ })
342
+
343
+ .then(willDelete => {
344
+
345
+ if (willDelete) {
346
+
347
+ firebase
348
+
349
+ .firestore()
350
+
351
+ .collection("posts")
352
+
353
+ .doc(this.list.id)
354
+
355
+ .delete()
356
+
357
+ .then(() => {
358
+
359
+ this.$swal("投稿を削除しました", {
360
+
361
+ icon: "success"
362
+
363
+ });
364
+
365
+ this.$router.go({
366
+
367
+ path: `/board/${this.$route.params.uid}`,
368
+
369
+ force: true
370
+
371
+ });
372
+
373
+ })
374
+
375
+ .catch(() => {
376
+
377
+ this.$swal("投稿を削除出来ません。", {
378
+
379
+ icon: "error"
380
+
381
+ });
382
+
383
+ });
384
+
385
+ } else {
386
+
387
+ this.$swal("キャンセルしました。");
388
+
389
+ }
390
+
391
+ })
392
+
393
+ .catch(() => {
394
+
395
+ this.$swal("投稿を削除出来ません。", {
396
+
397
+ icon: "error"
398
+
399
+ });
400
+
401
+ });
402
+
403
+ }
404
+
405
+ }
406
+
407
+ }
408
+
409
+ };
410
+
411
+ </script>
180
412
 
181
413
  ```
182
414