質問編集履歴
5
追記１追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -265,4 +265,36 @@
|
|
|
265
265
|
});
|
|
266
266
|
});
|
|
267
267
|
},
|
|
268
|
-
```
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
#追記１
|
|
271
|
+
|
|
272
|
+
※以下のソース追加前
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
上記画像のようにブックマークされた投稿のみ「isBookmarked：true」が付与されるようにしております。
|
|
276
|
+
そのため、あえてわかりやすく投稿に{{list,isBookmarked}}としてブックマークされた投稿のみ
|
|
277
|
+
trueと表示されるようにしております。
|
|
278
|
+
|
|
279
|
+
```html
|
|
280
|
+
<img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-if="hasBookmark(list)"/>
|
|
281
|
+
<img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark"v-else/>
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
```js
|
|
285
|
+
hasBookmark(book) {
|
|
286
|
+
return this.list.includes(book.isBookmarked);
|
|
287
|
+
},
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
isBookmarked」でtrueであれば「ブックマーク未保存」、falseであれば「ブックマーク保存」と表示を切り替えたく、
|
|
291
|
+
以下のようにソースを組みましたが、現在以下のようなエラーが出ます・・
|
|
292
|
+
|
|
293
|
+
※上記ソース追加後
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
表示のさせ方がよろしくないのでしょうか。
|
|
297
|
+
|
|
298
|
+
もし他に良い方法があればご教示頂けると幸いです。
|
|
299
|
+
|
|
300
|
+
よろしくお願いいたします。
|
4
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
以上画像のようにbookmark.vueの投稿内に「isBookmarked：true」というデータを渡しております。
|
|
12
12
|
|
|
13
13
|
子コンポーネント「list.vue」で以下のようにsaveBookmark()とdeleteBookmark()を作成しておりますが、
|
|
14
|
-
どのように「isBookmarked」がtrue,かfalseか判定してあげたらよいのか分から
|
|
14
|
+
どのように「isBookmarked」がtrue,かfalseか判定してあげたらよいのか分からず行き詰っております・・
|
|
15
15
|
|
|
16
16
|
```ここに言語を入力
|
|
17
17
|
<img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark"/>
|
3
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で
|
|
7
|
-
表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
|
|
6
|
+
ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
|
|
8
7
|
|
|
9
8
|
※以下赤で囲っている箇所参照
|
|
10
9
|
|
2
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
現状子コンポーネントである「list.vue」にて以下のように左下のボタンを用意して、
|
|
2
|
-
それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
|
|
1
|
+
現状子コンポーネントである「list.vue」にて以下のように左下のボタンを用意して、それぞれsaveBookmark()とdeleteBookmark()を作成し、並べている状態です。
|
|
3
2
|
|
|
4
3
|
|
|
5
4
|
|
1
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
ブックマークされている投稿かどうかが判定できる情報「isBookmarked」を親コンポーネントである「bookmaek.vue」で
|
|
8
|
-
用意しているメソッド「saveBookmark(保存)」する際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、
|
|
9
|
-
「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
|
|
8
|
+
表示させる際に一緒に渡してあげているので、子コンポーネント側(list.vue)で、「isBookmarked」がtrueかfalseかで表示を変えてあげたいと考えております。
|
|
10
9
|
|
|
11
10
|
※以下赤で囲っている箇所参照
|
|
12
11
|
|