質問編集履歴

4

内容修正

2021/07/04 01:15

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【 Vue x Firebase】パラメ変更の検知(WatchまたはbeforeRouteUpdate)を使用したいがどように記述しいのか分からない
1
+ 「ブックマク保存された時のアイコン」と「ブックマク取り消されアイコン」を リアルタイムで表示を画面上で切り替えたい
test CHANGED
@@ -1,106 +1,20 @@
1
+ ブックマーク機能は実装できましたが、「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を
2
+
3
+ リアルタイムで表示を画面上で切り替えたいと考えております。
4
+
5
+ それぞれアイコンを押下後、手動でリロードすればアイコンは切り替わりますが、リロードせずに行いたいです。
6
+
7
+
8
+
1
- 現状、「自身のマイページ」から「他のユーザーのマイページ」へページ遷移をするとそのユーザーのページへ遷移できるのですが、「他のユーザーのマイページ」へ遷移後、再び「自身のマイページ」へ戻ろとすると【/mypage/(自身のuid)】とって、しっかりと自身のまページ遷移できいることが確認できまが、画面上でジ遷移前の情報が残ったままなってしまっておす。
9
+ ※以前にも同じような質問させきましたが、画面自体をリロードして解決したため、今回リロドをせずアイコンを切替えたいです。
2
10
 
3
11
 
4
12
 
5
13
  ```ここに言語を入力
6
14
 
7
- <router-link
15
+ <img :src="isBookmark" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-if="list.isBookmarked"/>
8
16
 
9
- :to="`/mypage/${this.uid}`"
10
-
11
- class="hamburger-link neon3 flash"
12
-
13
- v-if="authenticatedUser"
14
-
15
- >MYPAGE</router-link>
16
-
17
- ```
18
-
19
-
20
-
21
- 手動でリロードすると改善されますが、再び自身のマイページへ戻った際にはしっかりと変更検知されるようにしたいです。
22
-
23
-
24
-
25
- 公式リファレンスにある[パラメーター変更の検知](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すればいいとのことですがどこにどのように記述したらいいのか分からない状況です・・・。
26
-
27
-
28
-
29
- ```ここに言語を入力
30
-
31
- const User = {
32
-
33
- template: '...',
34
-
35
- watch: {
36
-
37
- $route(to, from) {
38
-
39
- // ルートの変更の検知...
40
-
41
- }
42
-
43
- }
44
-
45
- }
46
-
47
- ```
48
-
49
-
50
-
51
- 分かる方いらっしゃいましたらお力添えをいただけませんでしょうか。
52
-
53
-
54
-
55
- よろしくお願いいたします。
56
-
57
-
58
-
59
- #header.vue
60
-
61
-
62
-
63
- ```ここに言語を入力
64
-
65
- <slide right disableOutsideClick width="200" class="hamburger-menu">
66
-
67
- <router-link to="/" class="hamburger-link neon3 flash home-link">HOME</router-link>
68
-
69
- <router-link to="/about" class="hamburger-link neon3 flash">ABOUT</router-link>
70
-
71
- <router-link
72
-
73
- :to="`/board/${this.uid}`"
74
-
75
- class="hamburger-link neon3 flash"
76
-
77
- v-if="authenticatedUser"
78
-
79
- >POST</router-link>
80
-
81
- <router-link to="/board" class="hamburger-link neon3 flash" v-if="!authenticatedUser">POST</router-link>
82
-
83
-
84
-
85
- <router-link to="/signup" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
86
-
87
- <router-link to="/signin" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
88
-
89
- <router-link
90
-
91
- :to="`/mypage/${this.uid}`"
92
-
93
- class="hamburger-link neon3 flash"
94
-
95
- v-if="authenticatedUser"
96
-
97
- >MYPAGE</router-link>
98
-
99
- <router-link to="/mypage" class="hamburger-link neon3 flash" v-if="!authenticatedUser">MYPAGE</router-link>
100
-
101
- <button class="hamburger-link neon3 flash" @click="signOut" v-if="authenticatedUser">SINGOUT</button>
102
-
103
- </slide>
17
+ <img :src="isBookmarked" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-else />
104
18
 
105
19
  ```
106
20
 
@@ -108,330 +22,26 @@
108
22
 
109
23
  ```ここに言語を入力
110
24
 
111
- <script>
112
-
113
- import firebase from "firebase";
114
-
115
- import Vue from "vue";
116
-
117
- import { Slide } from "vue-burger-menu";
118
-
119
- Vue.component("slide", Slide);
120
-
121
-
122
-
123
25
  export default {
124
-
125
- name: "signOut",
126
26
 
127
27
  data() {
128
28
 
129
29
  return {
130
30
 
131
- authenticatedUser: "",
31
+ isBookmark: require("../assets/ブックマーク保存.jpg"),
132
32
 
33
+ isBookmarked: require("../assets/ブックマーク未保存.jpg"),
34
+
133
- uid: null
35
+ ~ 省略 ~
134
36
 
135
37
  };
136
38
 
137
39
  },
138
40
 
139
- methods: {
140
-
141
- signOut() {
142
-
143
- firebase
144
-
145
- .auth()
146
-
147
- .signOut()
148
-
149
- .then(() => {
150
-
151
- this.$router.push("/signin");
152
-
153
- })
154
-
155
- .catch(() => {
156
-
157
- this.$swal("ログアウト出来ませんでした。", {
158
-
159
- icon: "error"
160
-
161
- });
162
-
163
- });
164
-
165
- }
166
-
167
- },
168
-
169
- mounted() {
170
-
171
- firebase.auth().onAuthStateChanged(user => {
172
-
173
- if (user) {
174
-
175
- this.authenticatedUser = true;
176
-
177
-
178
-
179
- const currentUser = firebase.auth().currentUser;
180
-
181
- this.uid = currentUser.uid;
182
-
183
- } else {
184
-
185
- this.authenticatedUser = false;
186
-
187
- }
188
-
189
- });
190
-
191
- }
192
-
193
- };
194
-
195
- </script>
196
-
197
41
  ```
198
42
 
199
43
 
200
44
 
201
- #router.vue
45
+ お忙しい中大変申し訳ございませんが、ご教示頂けると幸いです。
202
46
 
203
-
204
-
205
- ```ここに言語を入力
47
+ 宜しくお願い致します。
206
-
207
- import Vue from "vue";
208
-
209
- import VueRouter from "vue-router";
210
-
211
- import Main from "../views/main.vue";
212
-
213
- import Signin from "../views/signin.vue";
214
-
215
- import Signup from "../views/signup.vue";
216
-
217
- import About from "../views/about.vue";
218
-
219
- import Mypage from "../views/mypage.vue";
220
-
221
- import Board from "../views/board.vue";
222
-
223
- import Chat from "../components/chat.vue";
224
-
225
- import Bookmark from "../components/bookmark.vue";
226
-
227
- import firebase from "firebase";
228
-
229
-
230
-
231
- Vue.use(VueRouter);
232
-
233
-
234
-
235
- const routes = [
236
-
237
- {
238
-
239
- path: "/",
240
-
241
- name: "Main",
242
-
243
- component: Main,
244
-
245
- },
246
-
247
- {
248
-
249
- path: "/signin",
250
-
251
- name: "Signin",
252
-
253
- component: Signin,
254
-
255
- },
256
-
257
- {
258
-
259
- path: "/signup",
260
-
261
- name: "Signup",
262
-
263
- component: Signup,
264
-
265
- },
266
-
267
- {
268
-
269
- path: "/about",
270
-
271
- name: "About",
272
-
273
- component: About,
274
-
275
- },
276
-
277
- {
278
-
279
- path: "/mypage/:uid",
280
-
281
- name: "Mypage",
282
-
283
- component: Mypage,
284
-
285
- meta: { requiresAuth: true },
286
-
287
- //このルートは認証が必要であることの状態をもたせている。
288
-
289
- },
290
-
291
- {
292
-
293
- path: "/mypage",
294
-
295
- name: "Mypage",
296
-
297
- component: Mypage,
298
-
299
- meta: { requiresAuth: true },
300
-
301
- //このルートは認証が必要であることの状態をもたせている。
302
-
303
- },
304
-
305
- {
306
-
307
- path: "/board/:uid",
308
-
309
- name: "Board",
310
-
311
- component: Board,
312
-
313
- },
314
-
315
- {
316
-
317
- path: "/board",
318
-
319
- name: "Board",
320
-
321
- component: Board,
322
-
323
- },
324
-
325
- {
326
-
327
- path: "/chat/:id",
328
-
329
- ///「:id」とすることで、Firestoreで取得した「id」先へページ遷移できる。
330
-
331
- name: "Chat",
332
-
333
- component: Chat,
334
-
335
- meta: { requiresAuth: true },
336
-
337
- },
338
-
339
- {
340
-
341
- path: "/bookmark/:uid",
342
-
343
- name: "Bookmark",
344
-
345
- component: Bookmark,
346
-
347
- },
348
-
349
- ];
350
-
351
-
352
-
353
- const scrollBehavior = (to, from, savedPosition) => {
354
-
355
- if (savedPosition) {
356
-
357
- return savedPosition;
358
-
359
- } else {
360
-
361
- return { x: 0, y: 0 };
362
-
363
- }
364
-
365
- //位置を指定して指定箇所へ遷移させる
366
-
367
- };
368
-
369
-
370
-
371
- const router = new VueRouter({
372
-
373
- mode: "history",
374
-
375
- base: process.env.BASE_URL,
376
-
377
- routes,
378
-
379
- scrollBehavior,
380
-
381
- //インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定
382
-
383
- });
384
-
385
-
386
-
387
- router.beforeEach((to, from, next) => {
388
-
389
- //ページ遷移が起こる直前にその関数が実行。
390
-
391
- //引数のto,fromには,現在遷移しようとしているルーティングの遷移先ルートと遷移元ルートの情報が入ってる。
392
-
393
- const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
394
-
395
- //requiresAuthの状態をもつルートレコードなのかを確認。
396
-
397
- if (requiresAuth) {
398
-
399
- // このルートはログインされているかどうか認証が必要。
400
-
401
- // もしされていないならば、ログインページにリダイレクトします。
402
-
403
- firebase.auth().onAuthStateChanged(function(user) {
404
-
405
- if (user) {
406
-
407
- next();
408
-
409
- } else {
410
-
411
- next({
412
-
413
- path: "/signin",
414
-
415
- query: { redirect: to.fullPath },
416
-
417
- });
418
-
419
- }
420
-
421
- });
422
-
423
- } else {
424
-
425
- next();
426
-
427
- //同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得。
428
-
429
- }
430
-
431
- });
432
-
433
-
434
-
435
- export default router;
436
-
437
- ```

3

内容修正

2021/07/04 01:15

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- 公式リファレンスにある[パラメーター変更の検知](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すればいいとのことですがどこにどのように記述したらいいのか分からない状況です。
25
+ 公式リファレンスにある[パラメーター変更の検知](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すればいいとのことですがどこにどのように記述したらいいのか分からない状況です・・・
26
26
 
27
27
 
28
28
 

2

内容修正

2021/07/01 09:58

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- 公式リファレンスにある[パラメーター変更の検知](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すレバいいとのことですがどこにどのように記述したらいいのか分からない状況です。。
25
+ 公式リファレンスにある[パラメーター変更の検知](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)によると「同両方のルートが同じコンポーネントを描画した場合、古いインスタンスを再利用されることが原因のようです。」同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch すればいいとのことですがどこにどのように記述したらいいのか分からない状況です。。
26
26
 
27
27
 
28
28
 

1

内容修正

2021/06/30 00:27

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【 Vue x Firebase】パラメーター変更の検知(Watch)を使用したいがどのように記述したらいいのか分からない
1
+ 【 Vue x Firebase】パラメーター変更の検知(WatchまたはbeforeRouteUpdate)を使用したいがどのように記述したらいいのか分からない
test CHANGED
@@ -56,6 +56,8 @@
56
56
 
57
57
 
58
58
 
59
+ #header.vue
60
+
59
61
 
60
62
 
61
63
  ```ここに言語を入力
@@ -193,3 +195,243 @@
193
195
  </script>
194
196
 
195
197
  ```
198
+
199
+
200
+
201
+ #router.vue
202
+
203
+
204
+
205
+ ```ここに言語を入力
206
+
207
+ import Vue from "vue";
208
+
209
+ import VueRouter from "vue-router";
210
+
211
+ import Main from "../views/main.vue";
212
+
213
+ import Signin from "../views/signin.vue";
214
+
215
+ import Signup from "../views/signup.vue";
216
+
217
+ import About from "../views/about.vue";
218
+
219
+ import Mypage from "../views/mypage.vue";
220
+
221
+ import Board from "../views/board.vue";
222
+
223
+ import Chat from "../components/chat.vue";
224
+
225
+ import Bookmark from "../components/bookmark.vue";
226
+
227
+ import firebase from "firebase";
228
+
229
+
230
+
231
+ Vue.use(VueRouter);
232
+
233
+
234
+
235
+ const routes = [
236
+
237
+ {
238
+
239
+ path: "/",
240
+
241
+ name: "Main",
242
+
243
+ component: Main,
244
+
245
+ },
246
+
247
+ {
248
+
249
+ path: "/signin",
250
+
251
+ name: "Signin",
252
+
253
+ component: Signin,
254
+
255
+ },
256
+
257
+ {
258
+
259
+ path: "/signup",
260
+
261
+ name: "Signup",
262
+
263
+ component: Signup,
264
+
265
+ },
266
+
267
+ {
268
+
269
+ path: "/about",
270
+
271
+ name: "About",
272
+
273
+ component: About,
274
+
275
+ },
276
+
277
+ {
278
+
279
+ path: "/mypage/:uid",
280
+
281
+ name: "Mypage",
282
+
283
+ component: Mypage,
284
+
285
+ meta: { requiresAuth: true },
286
+
287
+ //このルートは認証が必要であることの状態をもたせている。
288
+
289
+ },
290
+
291
+ {
292
+
293
+ path: "/mypage",
294
+
295
+ name: "Mypage",
296
+
297
+ component: Mypage,
298
+
299
+ meta: { requiresAuth: true },
300
+
301
+ //このルートは認証が必要であることの状態をもたせている。
302
+
303
+ },
304
+
305
+ {
306
+
307
+ path: "/board/:uid",
308
+
309
+ name: "Board",
310
+
311
+ component: Board,
312
+
313
+ },
314
+
315
+ {
316
+
317
+ path: "/board",
318
+
319
+ name: "Board",
320
+
321
+ component: Board,
322
+
323
+ },
324
+
325
+ {
326
+
327
+ path: "/chat/:id",
328
+
329
+ ///「:id」とすることで、Firestoreで取得した「id」先へページ遷移できる。
330
+
331
+ name: "Chat",
332
+
333
+ component: Chat,
334
+
335
+ meta: { requiresAuth: true },
336
+
337
+ },
338
+
339
+ {
340
+
341
+ path: "/bookmark/:uid",
342
+
343
+ name: "Bookmark",
344
+
345
+ component: Bookmark,
346
+
347
+ },
348
+
349
+ ];
350
+
351
+
352
+
353
+ const scrollBehavior = (to, from, savedPosition) => {
354
+
355
+ if (savedPosition) {
356
+
357
+ return savedPosition;
358
+
359
+ } else {
360
+
361
+ return { x: 0, y: 0 };
362
+
363
+ }
364
+
365
+ //位置を指定して指定箇所へ遷移させる
366
+
367
+ };
368
+
369
+
370
+
371
+ const router = new VueRouter({
372
+
373
+ mode: "history",
374
+
375
+ base: process.env.BASE_URL,
376
+
377
+ routes,
378
+
379
+ scrollBehavior,
380
+
381
+ //インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定
382
+
383
+ });
384
+
385
+
386
+
387
+ router.beforeEach((to, from, next) => {
388
+
389
+ //ページ遷移が起こる直前にその関数が実行。
390
+
391
+ //引数のto,fromには,現在遷移しようとしているルーティングの遷移先ルートと遷移元ルートの情報が入ってる。
392
+
393
+ const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
394
+
395
+ //requiresAuthの状態をもつルートレコードなのかを確認。
396
+
397
+ if (requiresAuth) {
398
+
399
+ // このルートはログインされているかどうか認証が必要。
400
+
401
+ // もしされていないならば、ログインページにリダイレクトします。
402
+
403
+ firebase.auth().onAuthStateChanged(function(user) {
404
+
405
+ if (user) {
406
+
407
+ next();
408
+
409
+ } else {
410
+
411
+ next({
412
+
413
+ path: "/signin",
414
+
415
+ query: { redirect: to.fullPath },
416
+
417
+ });
418
+
419
+ }
420
+
421
+ });
422
+
423
+ } else {
424
+
425
+ next();
426
+
427
+ //同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得。
428
+
429
+ }
430
+
431
+ });
432
+
433
+
434
+
435
+ export default router;
436
+
437
+ ```