質問編集履歴

5

追記1追加

2021/06/22 07:45

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -533,3 +533,67 @@
533
533
  },
534
534
 
535
535
  ```
536
+
537
+
538
+
539
+ #追記1
540
+
541
+
542
+
543
+ ※以下のソース追加前
544
+
545
+ ![イメージ説明](099ae7418b81d823cb926538951cac68.png)
546
+
547
+
548
+
549
+ 上記画像のようにブックマークされた投稿のみ「isBookmarked:true」が付与されるようにしております。
550
+
551
+ そのため、あえてわかりやすく投稿に{{list,isBookmarked}}としてブックマークされた投稿のみ
552
+
553
+ trueと表示されるようにしております。
554
+
555
+
556
+
557
+ ```html
558
+
559
+ <img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-if="hasBookmark(list)"/>
560
+
561
+ <img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark"v-else/>
562
+
563
+ ```
564
+
565
+
566
+
567
+ ```js
568
+
569
+ hasBookmark(book) {
570
+
571
+ return this.list.includes(book.isBookmarked);
572
+
573
+ },
574
+
575
+ ```
576
+
577
+
578
+
579
+ isBookmarked」でtrueであれば「ブックマーク未保存」、falseであれば「ブックマーク保存」と表示を切り替えたく、
580
+
581
+ 以下のようにソースを組みましたが、現在以下のようなエラーが出ます・・
582
+
583
+
584
+
585
+ ※上記ソース追加後
586
+
587
+ ![イメージ説明](182feaa29284684065691a232f08f188.png)
588
+
589
+
590
+
591
+ 表示のさせ方がよろしくないのでしょうか。
592
+
593
+
594
+
595
+ もし他に良い方法があればご教示頂けると幸いです。
596
+
597
+
598
+
599
+ よろしくお願いいたします。

4

内容修正

2021/06/22 07:45

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  子コンポーネント「list.vue」で以下のようにsaveBookmark()とdeleteBookmark()を作成しておりますが、
26
26
 
27
- どのように「isBookmarked」がtrue,かfalseか判定してあげたらよいのか分からない状況です・・
27
+ どのように「isBookmarked」がtrue,かfalseか判定してあげたらよいのか分からず行き詰っております・・
28
28
 
29
29
 
30
30
 

3

内容修正

2021/06/21 16:45

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で
12
-
13
- 表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
11
+ ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
14
12
 
15
13
 
16
14
 

2

内容修正

2021/06/21 11:14

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,4 @@
1
- 現状子コンポーネントである「list.vue」にて以下のように左下のボタンを用意して、
2
-
3
- それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
1
+ 現状子コンポーネントである「list.vue」にて以下のように左下のボタンを用意して、それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
4
2
 
5
3
 
6
4
 

1

内容修正

2021/06/21 08:02

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,7 @@
12
12
 
13
13
  ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で
14
14
 
15
- 用意しているメソッド「saveBookmark(保存)」する際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、
16
-
17
- 「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
15
+ 表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
18
16
 
19
17
 
20
18