teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Vue x Firebase】投稿者のみメッセージを削除するアラートを表示させたいです

編集履歴

質問編集履歴

6

修正

2021/05/21 03:26

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -16,23 +16,37 @@
16
16
 
17
17
 
18
18
 
19
- 「現在のログイン中のユーザー（this.$route.params.uid）と
19
+ 「現在のログイン中のユーザー（this.uid）と
20
20
 
21
+ ```ここに言語を入力
22
+
23
+ const currentUser = firebase.auth().currentUser;
24
+
21
- 「postsを参照して、投稿者の(uid)」
25
+ this.uid = currentUser.uid;
26
+
27
+ ```
22
28
 
23
29
 
24
30
 
25
- 上記２つが合致した場合にアラートが出るようにしたいと考えていますが、
31
+ 「postsを参照して、投稿者の(this.list.uid)」
26
32
 
27
- 「postsを参照して、投稿者の(uid)」を参照するやり方がわからず困っております。。
33
+ ```ここに言語を入力
28
34
 
35
+ props: {
29
36
 
37
+ list: {
30
38
 
31
- ![画像](cd3db88b99da456e4e514b9566e5dbaf.png)
39
+ type: Object,
32
40
 
41
+ },
33
42
 
43
+ index: {
34
44
 
35
- 青で囲っているuid部分を取得する際には、どのように記述したら良いのでしょうか。。
45
+ type: Number,
46
+
47
+ },
48
+
49
+ ```
36
50
 
37
51
 
38
52
 
@@ -40,67 +54,17 @@
40
54
 
41
55
 
42
56
 
43
- ```js
44
-
45
- created() {
46
-
47
- firebase
48
-
49
- .firestore()
50
-
51
- .collection("posts")
52
-
53
- .doc(this.list.id)
54
-
55
- .get()
56
-
57
- ```
58
-
59
- 現状、上記this.list.idにてドキュメントidまで取得はできております。
57
+ propsで受け取ったuidを使って投稿者と認識させています。
60
58
 
61
59
 
62
60
 
63
- 公式に書いているようにget()を使ってuidを取得して「this.userid」に格納して
61
+ if文で互いのuidを認識させることはできたのですが、
64
62
 
65
- if (this.userid == this.$route.params.uid) を使用しようと考えています。
63
+ なぜかアラートにてキャンセルをしても対象の投稿が消えてしまいます・・
66
64
 
67
65
 
68
66
 
69
- [Cloud Firestore でデータを取得する](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)
70
-
71
-
72
-
73
- ```js
74
-
75
- created() {
76
-
77
- firebase
78
-
79
- .firestore()
80
-
81
- .collection("posts")
82
-
83
- .doc(this.list.id)
84
-
85
- .get()
86
-
87
- .then((doc) => {
88
-
89
- if (doc.exists) {
67
+ if分の位置が誤っているのでしょうか・・
90
-
91
- this.userid.push(doc.data().uid);
92
-
93
- }
94
-
95
- });
96
-
97
- },
98
-
99
- ```
100
-
101
-
102
-
103
- このget()以降がどのように記述したらuidを取ってこれるのか分からない状況です。。
104
68
 
105
69
 
106
70
 
@@ -122,59 +86,15 @@
122
86
 
123
87
  ```js
124
88
 
125
- created() {
89
+ deletePost() {
126
90
 
127
- firebase
91
+ const currentUser = firebase.auth().currentUser;
128
92
 
129
- .firestore()
93
+ this.uid = currentUser.uid;
130
94
 
131
- .collection("posts")
132
95
 
133
- .doc(this.list.id)
134
96
 
135
- .get()
136
-
137
- .then((doc) => {
138
-
139
- if (doc.exists) {
140
-
141
- this.userid.push(doc.data().uid);
142
-
143
- }
144
-
145
- });
146
-
147
- },
148
-
149
- methods: {
150
-
151
- savePost() {
152
-
153
- firebase
154
-
155
- .firestore()
156
-
157
- .collection("users")
158
-
159
- .doc(this.$route.params.uid)
160
-
161
- .collection("bookmarks")
162
-
163
- .doc(this.$route.params.uid)
164
-
165
- .set({
166
-
167
- uid: this.$route.params.uid,
168
-
169
- list: this.list,
170
-
171
- });
172
-
173
- },
174
-
175
- deletePost(id) {
176
-
177
- if (this.userid == this.$route.params.uid) {
97
+ if (this.list.uid == this.uid) {
178
98
 
179
99
  firebase
180
100
 
@@ -198,9 +118,9 @@
198
118
 
199
119
  dangerMode: true,
200
120
 
201
- }).then((willDelete) => {
121
+ })
202
122
 
203
- if (willDelete) {
123
+ .then(() => {
204
124
 
205
125
  this.$swal("投稿を削除しました", {
206
126
 
@@ -216,15 +136,17 @@
216
136
 
217
137
  });
218
138
 
139
+ })
140
+
219
- } else {
141
+ .catch(() => {
220
142
 
221
143
  this.$swal("キャンセルしました。");
222
144
 
223
- }
145
+ });
224
146
 
225
- });
147
+ }
226
148
 
227
- // }
149
+ },
228
150
 
229
151
  },
230
152
 

5

修正

2021/05/21 03:26

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -36,12 +36,74 @@
36
36
 
37
37
 
38
38
 
39
+ ![イメージ説明](dbacf363a32e966c50b53d1b2c66256d.png)
40
+
41
+
42
+
43
+ ```js
44
+
45
+ created() {
46
+
47
+ firebase
48
+
49
+ .firestore()
50
+
51
+ .collection("posts")
52
+
53
+ .doc(this.list.id)
54
+
55
+ .get()
56
+
57
+ ```
58
+
59
+ 現状、上記this.list.idにてドキュメントidまで取得はできております。
60
+
61
+
62
+
39
- 公式に書いているようにget()を使うとは思うのですが・・
63
+ 公式に書いているようにget()を使ってuidを取得して「this.userid」に格納して
64
+
65
+ if (this.userid == this.$route.params.uid) を使用しようと考えています。
66
+
67
+
40
68
 
41
69
  [Cloud Firestore でデータを取得する](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)
42
70
 
43
71
 
44
72
 
73
+ ```js
74
+
75
+ created() {
76
+
77
+ firebase
78
+
79
+ .firestore()
80
+
81
+ .collection("posts")
82
+
83
+ .doc(this.list.id)
84
+
85
+ .get()
86
+
87
+ .then((doc) => {
88
+
89
+ if (doc.exists) {
90
+
91
+ this.userid.push(doc.data().uid);
92
+
93
+ }
94
+
95
+ });
96
+
97
+ },
98
+
99
+ ```
100
+
101
+
102
+
103
+ このget()以降がどのように記述したらuidを取ってこれるのか分からない状況です。。
104
+
105
+
106
+
45
107
  また、もし他に良い方法があれば教えていただけると幸いです。
46
108
 
47
109
 

4

内容訂正。

2021/05/20 12:28

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  ```html
54
54
 
55
- <button class="hide-btn" @click="deletePost(id)">×</button>
55
+ <button class="hide-btn" @click="deletePost">×</button>
56
56
 
57
57
  ```
58
58
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  .collection("posts")
70
70
 
71
- .doc(this.$route.params.uid)
71
+ .doc(this.list.id)
72
72
 
73
73
  .get()
74
74
 
@@ -77,8 +77,6 @@
77
77
  if (doc.exists) {
78
78
 
79
79
  this.userid.push(doc.data().uid);
80
-
81
- console.log(doc.data());
82
80
 
83
81
  }
84
82
 
@@ -114,7 +112,7 @@
114
112
 
115
113
  deletePost(id) {
116
114
 
117
- // if (this.userid == this.$route.params.uid) {
115
+ if (this.userid == this.$route.params.uid) {
118
116
 
119
117
  firebase
120
118
 
@@ -122,11 +120,9 @@
122
120
 
123
121
  .collection("posts")
124
122
 
125
- .doc()
123
+ .doc(this.list.id)
126
124
 
127
125
  .delete();
128
-
129
- console.log(id);
130
126
 
131
127
  this.$swal({
132
128
 

3

内容変更

2021/05/20 12:23

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -22,9 +22,9 @@
22
22
 
23
23
 
24
24
 
25
- 上記２つが合致した場合にアラートが出るようにしたいと考えていますが、「postsを参照して、投稿者の(uid)」を
25
+ 上記２つが合致した場合にアラートが出るようにしたいと考えていますが、
26
26
 
27
- 参照するやり方がわからず困っております。。
27
+ 「postsを参照して、投稿者の(uid)」を参照するやり方がわからず困っております。。
28
28
 
29
29
 
30
30
 
@@ -52,7 +52,7 @@
52
52
 
53
53
  ```html
54
54
 
55
- <button class="hide-btn" @click="deletePost">×</button>
55
+ <button class="hide-btn" @click="deletePost(id)">×</button>
56
56
 
57
57
  ```
58
58
 
@@ -64,33 +64,57 @@
64
64
 
65
65
  firebase
66
66
 
67
+ .firestore()
68
+
69
+ .collection("posts")
70
+
71
+ .doc(this.$route.params.uid)
72
+
73
+ .get()
74
+
75
+ .then((doc) => {
76
+
77
+ if (doc.exists) {
78
+
79
+ this.userid.push(doc.data().uid);
80
+
81
+ console.log(doc.data());
82
+
83
+ }
84
+
85
+ });
86
+
87
+ },
88
+
89
+ methods: {
90
+
91
+ savePost() {
92
+
93
+ firebase
94
+
67
95
  .firestore()
68
96
 
69
- .collection("posts")
97
+ .collection("users")
70
98
 
71
99
  .doc(this.$route.params.uid)
72
100
 
73
- .get()
101
+ .collection("bookmarks")
74
102
 
75
- .then((doc) => {
103
+ .doc(this.$route.params.uid)
76
104
 
77
- if (doc.exists){
105
+ .set({
78
106
 
79
- 　const uid = doc.data(uid);
107
+ uid: this.$route.params.uid,
108
+
109
+ list: this.list,
80
110
 
81
111
  });
82
112
 
83
- }
113
+ },
84
114
 
115
+ deletePost(id) {
85
116
 
86
-
87
- deletePost() {
88
-
89
-
90
-
91
- if (uid == this.$route.params.uid) {
117
+ // if (this.userid == this.$route.params.uid) {
92
-
93
- console.log(this.uid);
94
118
 
95
119
  firebase
96
120
 
@@ -98,9 +122,11 @@
98
122
 
99
123
  .collection("posts")
100
124
 
101
- .doc(this.$route.params.uid)
125
+ .doc()
102
126
 
103
127
  .delete();
128
+
129
+ console.log(id);
104
130
 
105
131
  this.$swal({
106
132
 
@@ -140,8 +166,10 @@
140
166
 
141
167
  });
142
168
 
143
- }
169
+ // }
144
170
 
145
171
  },
146
172
 
173
+ },
174
+
147
175
  ```

2

js部修正

2021/05/18 12:46

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -60,15 +60,31 @@
60
60
 
61
61
  ```js
62
62
 
63
- deletePost() {
63
+ created() {
64
64
 
65
- const uid = firebase
65
+ firebase
66
66
 
67
67
  .firestore()
68
68
 
69
69
  .collection("posts")
70
70
 
71
+ .doc(this.$route.params.uid)
72
+
71
- .doc();
73
+ .get()
74
+
75
+ .then((doc) => {
76
+
77
+ if (doc.exists){
78
+
79
+ 　const uid = doc.data(uid);
80
+
81
+ });
82
+
83
+ }
84
+
85
+
86
+
87
+ deletePost() {
72
88
 
73
89
 
74
90
 

1

内容修正

2021/05/15 04:57

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -33,6 +33,12 @@
33
33
 
34
34
 
35
35
  青で囲っているuid部分を取得する際には、どのように記述したら良いのでしょうか。。
36
+
37
+
38
+
39
+ 公式に書いているようにget()を使うとは思うのですが・・
40
+
41
+ [Cloud Firestore でデータを取得する](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)
36
42
 
37
43
 
38
44