質問編集履歴
5
追記１追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -533,3 +533,67 @@
|
|
|
533
533
|
},
|
|
534
534
|
|
|
535
535
|
```
|
|
536
|
+
|
|
537
|
+
|
|
538
|
+
|
|
539
|
+
#追記１
|
|
540
|
+
|
|
541
|
+
|
|
542
|
+
|
|
543
|
+
※以下のソース追加前
|
|
544
|
+
|
|
545
|
+
|
|
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
|
+
|
|
588
|
+
|
|
589
|
+
|
|
590
|
+
|
|
591
|
+
表示のさせ方がよろしくないのでしょうか。
|
|
592
|
+
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
もし他に良い方法があればご教示頂けると幸いです。
|
|
596
|
+
|
|
597
|
+
|
|
598
|
+
|
|
599
|
+
よろしくお願いいたします。
|
4
内容修正
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
内容修正
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
内容修正
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
内容修正
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
|
|