質問編集履歴
4
内容修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
Firestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい
|
body
CHANGED
|
@@ -1,17 +1,29 @@
|
|
|
1
|
-
#
|
|
1
|
+
#Firestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたい
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
現在ブックマーク機能を導入したく、写真の投稿左下にボタンを設置しており、
|
|
6
|
+
そのボタンに対して「saveBookmark(ブックマークを保存)」と「deletebookmark(ブックマークを削除)」の二つのメソッドを持たせている状態です。
|
|
6
7
|
|
|
8
|
+
そこでFirestoreのサブコレクションにデータが存在していなかった場合「保存」、存在したら「削除」と条件分岐させたいです。
|
|
9
|
+
|
|
10
|
+
どのように分岐したら実現できるか分からず行き詰っております・・
|
|
11
|
+
|
|
12
|
+
また、理想としては実現できるか別として以下のように親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に
|
|
13
|
+
切替できるのであれば、そちらを実装したいと考えております。
|
|
14
|
+
|
|
15
|
+
####親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
|
|
16
|
+
|
|
17
|
+
|
|
7
18
|
board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
|
|
8
19
|
bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにしてメソッドを更新したいです。
|
|
9
20
|
|
|
10
|
-
|
|
21
|
+
---
|
|
11
|
-
どのようにして更新するのか分からず行き詰まってしまっております。
|
|
12
22
|
|
|
13
23
|
分かる方いらっしゃいましたらお力添えをいただきたいです。
|
|
14
24
|
|
|
25
|
+
またもっと良い方法があればご教示頂けると幸いです。
|
|
26
|
+
|
|
15
27
|
よろしくお願いいたします。
|
|
16
28
|
|
|
17
29
|
#list.vue(子コンポーネント)
|
3
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
ブックマーク機能を導入したく、写真の投稿左下にボタンを設置し、
|
|
5
|
+
現在ブックマーク機能を導入したく、写真の投稿左下にボタンを設置しており、
|
|
6
|
+
|
|
6
7
|
board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
|
|
7
|
-
bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにメソッドを更新し
|
|
8
|
+
bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにしてメソッドを更新したいです。
|
|
8
9
|
|
|
9
10
|
それぞれのメソッドは実装できているのですが、
|
|
10
11
|
どのようにして更新するのか分からず行き詰まってしまっております。
|
2
内容修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
|
body
CHANGED
|
@@ -1,28 +1,19 @@
|
|
|
1
|
-
#コ
|
|
1
|
+
#親コンポーネントのメソッド(保存機能)を子コンポーネントで(削除機能)に更新をしたい
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
ブックマーク機能を導入したく、写真の投稿左下にボタンを設置し、
|
|
6
|
-
|
|
6
|
+
board.vue(投稿一覧ページ)ではボタンをsaveBookmark(ブックマークを保存)ボタンにして
|
|
7
|
+
bookmark.vue(ブックマーク一覧ページ)ではボタンをdeletebookmark(ブックマークを削除)ボタンにメソッドを更新していです。
|
|
7
8
|
|
|
8
9
|
それぞれのメソッドは実装できているのですが、
|
|
9
|
-
どのようにして
|
|
10
|
+
どのようにして更新するのか分からず行き詰まってしまっております。
|
|
10
11
|
|
|
11
|
-
そもそも@clickイベントにメソッドを２つ合わせるのはあまり良くないのでしょうか。
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark();deleteBookmark();"/>
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
理想としては、board.vue(投稿一覧ページ)では、投稿の左下のボタンをsavebookmark()メソッドに
|
|
18
|
-
bookmark.vue(ブックマーク一覧ページ)では投稿の左下のボタンをdeletebookmark()メソッド
|
|
19
|
-
切り替えができる方法があれば理想です・・
|
|
20
|
-
|
|
21
12
|
分かる方いらっしゃいましたらお力添えをいただきたいです。
|
|
22
13
|
|
|
23
14
|
よろしくお願いいたします。
|
|
24
15
|
|
|
25
|
-
#list.vue(
|
|
16
|
+
#list.vue(子コンポーネント)
|
|
26
17
|
|
|
27
18
|
```html
|
|
28
19
|
<template>
|
|
@@ -50,7 +41,7 @@
|
|
|
50
41
|
src="../assets/ブックマーク.jpg"
|
|
51
42
|
alt="ブックマーク"
|
|
52
43
|
class="bookmark-icon"
|
|
53
|
-
@click="saveBookmark
|
|
44
|
+
@click="saveBookmark"
|
|
54
45
|
/>
|
|
55
46
|
<p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
|
|
56
47
|
</div>
|
|
@@ -74,15 +65,12 @@
|
|
|
74
65
|
};
|
|
75
66
|
},
|
|
76
67
|
props: {
|
|
77
|
-
//親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す
|
|
78
68
|
list: {
|
|
79
69
|
type: Object,
|
|
80
70
|
required: true
|
|
81
|
-
//親コンポーネント(board.vue)のlist[Object型]をpropsで渡している。
|
|
82
71
|
},
|
|
83
72
|
index: {
|
|
84
73
|
type: Number
|
|
85
|
-
//親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
|
|
86
74
|
}
|
|
87
75
|
},
|
|
88
76
|
created() {
|
|
@@ -135,29 +123,7 @@
|
|
|
135
123
|
});
|
|
136
124
|
});
|
|
137
125
|
},
|
|
138
|
-
|
|
126
|
+
|
|
139
|
-
firebase
|
|
140
|
-
.firestore()
|
|
141
|
-
.collection("users")
|
|
142
|
-
.doc(this.$route.params.uid)
|
|
143
|
-
.collection("bookmarks")
|
|
144
|
-
.doc(this.list.bookmarkId)
|
|
145
|
-
.delete()
|
|
146
|
-
.then(() => {
|
|
147
|
-
this.$swal("ブックマークを取り消ししました。", {
|
|
148
|
-
icon: "success"
|
|
149
|
-
});
|
|
150
|
-
this.$router.go({
|
|
151
|
-
path: `/bookmark/${this.$route.params.uid}`,
|
|
152
|
-
force: true
|
|
153
|
-
});
|
|
154
|
-
})
|
|
155
|
-
.catch(() => {
|
|
156
|
-
this.$swal("ブックマークを取り消し出来ません。", {
|
|
157
|
-
icon: "error"
|
|
158
|
-
});
|
|
159
|
-
});
|
|
160
|
-
},
|
|
161
127
|
deletePost() {
|
|
162
128
|
const currentUser = firebase.auth().currentUser;
|
|
163
129
|
this.uid = currentUser.uid;
|
|
@@ -261,6 +227,31 @@
|
|
|
261
227
|
List
|
|
262
228
|
},
|
|
263
229
|
|
|
230
|
+
methods: {
|
|
231
|
+
deleteBookmark() {
|
|
232
|
+
firebase
|
|
233
|
+
.firestore()
|
|
234
|
+
.collection("users")
|
|
235
|
+
.doc(this.$route.params.uid)
|
|
236
|
+
.collection("bookmarks")
|
|
237
|
+
.doc(this.list.bookmarkId)
|
|
238
|
+
.delete()
|
|
239
|
+
.then(() => {
|
|
240
|
+
this.$swal("ブックマークを取り消ししました。", {
|
|
241
|
+
icon: "success"
|
|
242
|
+
});
|
|
243
|
+
this.$router.go({
|
|
244
|
+
path: `/bookmark/${this.$route.params.uid}`,
|
|
245
|
+
force: true
|
|
246
|
+
});
|
|
247
|
+
})
|
|
248
|
+
.catch(() => {
|
|
249
|
+
this.$swal("ブックマークを取り消し出来ません。", {
|
|
250
|
+
icon: "error"
|
|
251
|
+
});
|
|
252
|
+
});
|
|
253
|
+
},
|
|
254
|
+
},
|
|
264
255
|
created() {
|
|
265
256
|
|
|
266
257
|
firebase
|
1
内容修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -22,15 +22,89 @@
|
|
|
22
22
|
|
|
23
23
|
よろしくお願いいたします。
|
|
24
24
|
|
|
25
|
-
#
|
|
25
|
+
#list.vue(親コンポーネント)
|
|
26
26
|
|
|
27
27
|
```html
|
|
28
|
+
<template>
|
|
29
|
+
<div class="list">
|
|
30
|
+
<div class="face face1 flex">
|
|
31
|
+
<div class="content">
|
|
32
|
+
<img
|
|
33
|
+
class="profile-icon"
|
|
34
|
+
width="50"
|
|
35
|
+
height="50"
|
|
36
|
+
:src="
|
|
37
|
+
returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
|
|
38
|
+
"
|
|
39
|
+
/>
|
|
40
|
+
<h3>{{ list.title }}</h3>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="face face2 flex">
|
|
44
|
+
<div class="content flex">
|
|
45
|
+
<button class="hide-btn" @click="deletePost">×</button>
|
|
46
|
+
<p>{{ list.description }}</p>
|
|
28
|
-
<
|
|
47
|
+
<router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
|
|
48
|
+
<!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
|
|
49
|
+
<img
|
|
50
|
+
src="../assets/ブックマーク.jpg"
|
|
51
|
+
alt="ブックマーク"
|
|
52
|
+
class="bookmark-icon"
|
|
53
|
+
@click="saveBookmark();deleteBookmark();"
|
|
54
|
+
/>
|
|
55
|
+
<p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
29
60
|
```
|
|
30
61
|
|
|
31
|
-
|
|
32
62
|
```js
|
|
63
|
+
<script>
|
|
64
|
+
import firebase from "firebase";
|
|
65
|
+
import Vue from "vue";
|
|
66
|
+
import VueSwal from "vue-swal";
|
|
67
|
+
Vue.use(VueSwal);
|
|
68
|
+
export default {
|
|
69
|
+
data() {
|
|
70
|
+
return {
|
|
71
|
+
bookmarkId: "",
|
|
72
|
+
userDatas: [],
|
|
73
|
+
preview: require("../assets/デフォルト画像.jpg")
|
|
74
|
+
};
|
|
75
|
+
},
|
|
76
|
+
props: {
|
|
77
|
+
//親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す
|
|
78
|
+
list: {
|
|
79
|
+
type: Object,
|
|
80
|
+
required: true
|
|
81
|
+
//親コンポーネント(board.vue)のlist[Object型]をpropsで渡している。
|
|
82
|
+
},
|
|
83
|
+
index: {
|
|
84
|
+
type: Number
|
|
85
|
+
//親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
created() {
|
|
89
|
+
firebase
|
|
90
|
+
.firestore()
|
|
91
|
+
.collection("users")
|
|
92
|
+
.get()
|
|
93
|
+
.then(snapshot => {
|
|
94
|
+
snapshot.forEach(doc => {
|
|
95
|
+
this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
|
|
96
|
+
});
|
|
97
|
+
});
|
|
98
|
+
},
|
|
33
|
-
methods: {
|
|
99
|
+
methods: {
|
|
100
|
+
returnUserData() {
|
|
101
|
+
const userData = this.userDatas.find(
|
|
102
|
+
tmpUserData => this.list.uid === tmpUserData.uid
|
|
103
|
+
);
|
|
104
|
+
//this.userDatas（配列）に入っている値(uid)は、userDatas.uidとしても直接取れない為、tmpUserDataの引数に渡してからuidを取得する
|
|
105
|
+
//そのuidとidが一致したものを一つuserData（配列）へ格納。
|
|
106
|
+
return userData;
|
|
107
|
+
},
|
|
34
108
|
saveBookmark() {
|
|
35
109
|
const ref = firebase
|
|
36
110
|
.firestore()
|
|
@@ -38,9 +112,7 @@
|
|
|
38
112
|
.doc(this.$route.params.uid)
|
|
39
113
|
.collection("bookmarks")
|
|
40
114
|
.doc();
|
|
41
|
-
|
|
42
115
|
const id = ref.id;
|
|
43
|
-
|
|
44
116
|
firebase
|
|
45
117
|
.firestore()
|
|
46
118
|
.collection("users")
|
|
@@ -63,7 +135,6 @@
|
|
|
63
135
|
});
|
|
64
136
|
});
|
|
65
137
|
},
|
|
66
|
-
|
|
67
138
|
deleteBookmark() {
|
|
68
139
|
firebase
|
|
69
140
|
.firestore()
|
|
@@ -87,7 +158,52 @@
|
|
|
87
158
|
});
|
|
88
159
|
});
|
|
89
160
|
},
|
|
161
|
+
deletePost() {
|
|
162
|
+
const currentUser = firebase.auth().currentUser;
|
|
163
|
+
this.uid = currentUser.uid;
|
|
164
|
+
if (this.list.uid == this.uid) {
|
|
165
|
+
this.$swal({
|
|
166
|
+
title: "内容確認",
|
|
167
|
+
text: "投稿を削除しますか？",
|
|
168
|
+
icon: "warning",
|
|
169
|
+
buttons: true,
|
|
170
|
+
dangerMode: true
|
|
90
|
-
}
|
|
171
|
+
})
|
|
172
|
+
.then(willDelete => {
|
|
173
|
+
if (willDelete) {
|
|
174
|
+
firebase
|
|
175
|
+
.firestore()
|
|
176
|
+
.collection("posts")
|
|
177
|
+
.doc(this.list.id)
|
|
178
|
+
.delete()
|
|
179
|
+
.then(() => {
|
|
180
|
+
this.$swal("投稿を削除しました", {
|
|
181
|
+
icon: "success"
|
|
182
|
+
});
|
|
183
|
+
this.$router.go({
|
|
184
|
+
path: `/board/${this.$route.params.uid}`,
|
|
185
|
+
force: true
|
|
186
|
+
});
|
|
187
|
+
})
|
|
188
|
+
.catch(() => {
|
|
189
|
+
this.$swal("投稿を削除出来ません。", {
|
|
190
|
+
icon: "error"
|
|
191
|
+
});
|
|
192
|
+
});
|
|
193
|
+
} else {
|
|
194
|
+
this.$swal("キャンセルしました。");
|
|
195
|
+
}
|
|
196
|
+
})
|
|
197
|
+
.catch(() => {
|
|
198
|
+
this.$swal("投稿を削除出来ません。", {
|
|
199
|
+
icon: "error"
|
|
200
|
+
});
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
</script>
|
|
91
207
|
```
|
|
92
208
|
|
|
93
209
|
#bookmark.vue(ブックマーク一覧ページ)
|