teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を リアルタイムで表示を画面上で切り替えたい

編集履歴

質問編集履歴

4

内容修正

2021/07/04 01:15

投稿

TMTN
TMTN

スコア53

title CHANGED
@@ -1,1 +1,1 @@
1
- 【 Vue x Firebase】パラメーター変更の検知(WatchまたはbeforeRouteUpdate)を使用したいがどのように記述したらいいのか分からない
1
+ 「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を リアルタイムで表示を画面上で切り替えたい
body CHANGED
@@ -1,219 +1,24 @@
1
- 現状、「自身のマイページ」から「他のユーザーのマイページ」へページ遷移をするとそのユーザーのページへ遷移できるのですが、「他のユーザーのマイページ」へ遷移後、再び「自身のマイページ」へ戻ろうとすると【/mypage/（自身のuid）】となって、しっかりと自身のまページは遷移できていることが確認できますが、画面上ではページ遷移前の情報が残ったままになってしまっております。
1
+ ブックマーク機能は実装できましたが、「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を
2
+ リアルタイムで表示を画面上で切り替えたいと考えております。
3
+ それぞれアイコンを押下後、手動でリロードすればアイコンは切り替わりますが、リロードせずに行いたいです。
2
4
 
3
- ```ここに言語を入力
4
- <router-link
5
- :to="`/mypage/${this.uid}`"
5
+ ※以前にも同じような質問はさせて頂きましたが、画面自体をリロードして解決したため、今回はリロードをせずにアイコンを切り替えたいです。
6
- class="hamburger-link neon3 flash"
7
- v-if="authenticatedUser"
8
- >MYPAGE</router-link>
9
- ```
10
6
 
11
- 手動でリロードすると改善されますが、再び自身のマイページへ戻った際にはしっかりと変更検知されるようにしたいです。
12
-
13
- 公式リファレンスにある[パラメーター変更の検知](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 すればいいとのことですがどこにどのように記述したらいいのか分からない状況です・・・。
14
-
15
7
  ```ここに言語を入力
16
- const User = {
8
+ <img :src="isBookmark" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-if="list.isBookmarked"/>
17
- template: '...',
9
+ <img :src="isBookmarked" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-else />
18
- watch: {
19
- $route(to, from) {
20
- // ルートの変更の検知...
21
- }
22
- }
23
- }
24
10
  ```
25
11
 
26
- 分かる方いらっしゃいましたらお力添えをいただけませんでしょうか。
27
-
28
- よろしくお願いいたします。
29
-
30
- #header.vue
31
-
32
12
  ```ここに言語を入力
33
- <slide right disableOutsideClick width="200" class="hamburger-menu">
34
- <router-link to="/" class="hamburger-link neon3 flash home-link">HOME</router-link>
35
- <router-link to="/about" class="hamburger-link neon3 flash">ABOUT</router-link>
36
- <router-link
37
- :to="`/board/${this.uid}`"
38
- class="hamburger-link neon3 flash"
39
- v-if="authenticatedUser"
40
- >POST</router-link>
41
- <router-link to="/board" class="hamburger-link neon3 flash" v-if="!authenticatedUser">POST</router-link>
42
-
43
- <router-link to="/signup" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
44
- <router-link to="/signin" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
45
- <router-link
46
- :to="`/mypage/${this.uid}`"
47
- class="hamburger-link neon3 flash"
48
- v-if="authenticatedUser"
49
- >MYPAGE</router-link>
50
- <router-link to="/mypage" class="hamburger-link neon3 flash" v-if="!authenticatedUser">MYPAGE</router-link>
51
- <button class="hamburger-link neon3 flash" @click="signOut" v-if="authenticatedUser">SINGOUT</button>
52
- </slide>
53
- ```
54
-
55
- ```ここに言語を入力
56
- <script>
57
- import firebase from "firebase";
58
- import Vue from "vue";
59
- import { Slide } from "vue-burger-menu";
60
- Vue.component("slide", Slide);
61
-
62
13
  export default {
63
- name: "signOut",
64
14
  data() {
65
15
  return {
16
+ isBookmark: require("../assets/ブックマーク保存.jpg"),
66
- authenticatedUser: "",
17
+ isBookmarked: require("../assets/ブックマーク未保存.jpg"),
67
- uid: null
18
+ ~ 省略 ~
68
19
  };
69
20
  },
70
- methods: {
71
- signOut() {
72
- firebase
73
- .auth()
74
- .signOut()
75
- .then(() => {
76
- this.$router.push("/signin");
77
- })
78
- .catch(() => {
79
- this.$swal("ログアウト出来ませんでした。", {
80
- icon: "error"
81
- });
82
- });
83
- }
84
- },
85
- mounted() {
86
- firebase.auth().onAuthStateChanged(user => {
87
- if (user) {
88
- this.authenticatedUser = true;
89
-
90
- const currentUser = firebase.auth().currentUser;
91
- this.uid = currentUser.uid;
92
- } else {
93
- this.authenticatedUser = false;
94
- }
95
- });
96
- }
97
- };
98
- </script>
99
21
  ```
100
22
 
101
- #router.vue
102
-
103
- ```ここに言語を入力
104
- import Vue from "vue";
105
- import VueRouter from "vue-router";
106
- import Main from "../views/main.vue";
107
- import Signin from "../views/signin.vue";
108
- import Signup from "../views/signup.vue";
109
- import About from "../views/about.vue";
110
- import Mypage from "../views/mypage.vue";
111
- import Board from "../views/board.vue";
112
- import Chat from "../components/chat.vue";
113
- import Bookmark from "../components/bookmark.vue";
114
- import firebase from "firebase";
115
-
116
- Vue.use(VueRouter);
117
-
118
- const routes = [
119
- {
120
- path: "/",
121
- name: "Main",
122
- component: Main,
123
- },
124
- {
125
- path: "/signin",
126
- name: "Signin",
127
- component: Signin,
128
- },
129
- {
130
- path: "/signup",
131
- name: "Signup",
132
- component: Signup,
133
- },
134
- {
135
- path: "/about",
136
- name: "About",
137
- component: About,
138
- },
139
- {
140
- path: "/mypage/:uid",
141
- name: "Mypage",
142
- component: Mypage,
143
- meta: { requiresAuth: true },
144
- //このルートは認証が必要であることの状態をもたせている。
145
- },
146
- {
147
- path: "/mypage",
148
- name: "Mypage",
149
- component: Mypage,
150
- meta: { requiresAuth: true },
151
- //このルートは認証が必要であることの状態をもたせている。
152
- },
153
- {
154
- path: "/board/:uid",
155
- name: "Board",
156
- component: Board,
157
- },
158
- {
159
- path: "/board",
160
- name: "Board",
161
- component: Board,
162
- },
163
- {
164
- path: "/chat/:id",
165
- ///「:id」とすることで、Firestoreで取得した「id」先へページ遷移できる。
166
- name: "Chat",
167
- component: Chat,
168
- meta: { requiresAuth: true },
169
- },
170
- {
171
- path: "/bookmark/:uid",
172
- name: "Bookmark",
173
- component: Bookmark,
174
- },
175
- ];
176
-
177
- const scrollBehavior = (to, from, savedPosition) => {
178
- if (savedPosition) {
179
- return savedPosition;
180
- } else {
181
- return { x: 0, y: 0 };
182
- }
183
- //位置を指定して指定箇所へ遷移させる
184
- };
185
-
186
- const router = new VueRouter({
187
- mode: "history",
188
- base: process.env.BASE_URL,
189
- routes,
190
- scrollBehavior,
191
- //インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定
192
- });
193
-
194
- router.beforeEach((to, from, next) => {
195
- //ページ遷移が起こる直前にその関数が実行。
23
+ お忙しい中大変申し訳ございませんが、ご教示頂けると幸いです。
196
- //引数のto,fromには，現在遷移しようとしているルーティングの遷移先ルートと遷移元ルートの情報が入ってる。
197
- const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
198
- //requiresAuthの状態をもつルートレコードなのかを確認。
199
- if (requiresAuth) {
200
- // このルートはログインされているかどうか認証が必要。
201
- // もしされていないならば、ログインページにリダイレクトします。
202
- firebase.auth().onAuthStateChanged(function(user) {
203
- if (user) {
24
+ 宜しくお願い致します。
204
- next();
205
- } else {
206
- next({
207
- path: "/signin",
208
- query: { redirect: to.fullPath },
209
- });
210
- }
211
- });
212
- } else {
213
- next();
214
- //同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得。
215
- }
216
- });
217
-
218
- export default router;
219
- ```

3

内容修正

2021/07/04 01:15

投稿

TMTN
TMTN

スコア53

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  手動でリロードすると改善されますが、再び自身のマイページへ戻った際にはしっかりと変更検知されるようにしたいです。
12
12
 
13
- 公式リファレンスにある[パラメーター変更の検知](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 すればいいとのことですがどこにどのように記述したらいいのか分からない状況です。。
13
+ 公式リファレンスにある[パラメーター変更の検知](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 すればいいとのことですがどこにどのように記述したらいいのか分からない状況です・・・。
14
14
 
15
15
  ```ここに言語を入力
16
16
  const User = {

2

内容修正

2021/07/01 09:58

投稿

TMTN
TMTN

スコア53

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  手動でリロードすると改善されますが、再び自身のマイページへ戻った際にはしっかりと変更検知されるようにしたいです。
12
12
 
13
- 公式リファレンスにある[パラメーター変更の検知](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 すレバいいとのことですがどこにどのように記述したらいいのか分からない状況です。。
13
+ 公式リファレンスにある[パラメーター変更の検知](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 すればいいとのことですがどこにどのように記述したらいいのか分からない状況です。。
14
14
 
15
15
  ```ここに言語を入力
16
16
  const User = {

1

内容修正

2021/06/30 00:27

投稿

TMTN
TMTN

スコア53

title CHANGED
@@ -1,1 +1,1 @@
1
- 【 Vue x Firebase】パラメーター変更の検知(Watch)を使用したいがどのように記述したらいいのか分からない
1
+ 【 Vue x Firebase】パラメーター変更の検知(WatchまたはbeforeRouteUpdate)を使用したいがどのように記述したらいいのか分からない
body CHANGED
@@ -27,6 +27,7 @@
27
27
 
28
28
  よろしくお願いいたします。
29
29
 
30
+ #header.vue
30
31
 
31
32
  ```ここに言語を入力
32
33
  <slide right disableOutsideClick width="200" class="hamburger-menu">
@@ -95,4 +96,124 @@
95
96
  }
96
97
  };
97
98
  </script>
99
+ ```
100
+
101
+ #router.vue
102
+
103
+ ```ここに言語を入力
104
+ import Vue from "vue";
105
+ import VueRouter from "vue-router";
106
+ import Main from "../views/main.vue";
107
+ import Signin from "../views/signin.vue";
108
+ import Signup from "../views/signup.vue";
109
+ import About from "../views/about.vue";
110
+ import Mypage from "../views/mypage.vue";
111
+ import Board from "../views/board.vue";
112
+ import Chat from "../components/chat.vue";
113
+ import Bookmark from "../components/bookmark.vue";
114
+ import firebase from "firebase";
115
+
116
+ Vue.use(VueRouter);
117
+
118
+ const routes = [
119
+ {
120
+ path: "/",
121
+ name: "Main",
122
+ component: Main,
123
+ },
124
+ {
125
+ path: "/signin",
126
+ name: "Signin",
127
+ component: Signin,
128
+ },
129
+ {
130
+ path: "/signup",
131
+ name: "Signup",
132
+ component: Signup,
133
+ },
134
+ {
135
+ path: "/about",
136
+ name: "About",
137
+ component: About,
138
+ },
139
+ {
140
+ path: "/mypage/:uid",
141
+ name: "Mypage",
142
+ component: Mypage,
143
+ meta: { requiresAuth: true },
144
+ //このルートは認証が必要であることの状態をもたせている。
145
+ },
146
+ {
147
+ path: "/mypage",
148
+ name: "Mypage",
149
+ component: Mypage,
150
+ meta: { requiresAuth: true },
151
+ //このルートは認証が必要であることの状態をもたせている。
152
+ },
153
+ {
154
+ path: "/board/:uid",
155
+ name: "Board",
156
+ component: Board,
157
+ },
158
+ {
159
+ path: "/board",
160
+ name: "Board",
161
+ component: Board,
162
+ },
163
+ {
164
+ path: "/chat/:id",
165
+ ///「:id」とすることで、Firestoreで取得した「id」先へページ遷移できる。
166
+ name: "Chat",
167
+ component: Chat,
168
+ meta: { requiresAuth: true },
169
+ },
170
+ {
171
+ path: "/bookmark/:uid",
172
+ name: "Bookmark",
173
+ component: Bookmark,
174
+ },
175
+ ];
176
+
177
+ const scrollBehavior = (to, from, savedPosition) => {
178
+ if (savedPosition) {
179
+ return savedPosition;
180
+ } else {
181
+ return { x: 0, y: 0 };
182
+ }
183
+ //位置を指定して指定箇所へ遷移させる
184
+ };
185
+
186
+ const router = new VueRouter({
187
+ mode: "history",
188
+ base: process.env.BASE_URL,
189
+ routes,
190
+ scrollBehavior,
191
+ //インスタンスの作成時に、scrollBehaviorに位置を返す関数を指定
192
+ });
193
+
194
+ router.beforeEach((to, from, next) => {
195
+ //ページ遷移が起こる直前にその関数が実行。
196
+ //引数のto,fromには，現在遷移しようとしているルーティングの遷移先ルートと遷移元ルートの情報が入ってる。
197
+ const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
198
+ //requiresAuthの状態をもつルートレコードなのかを確認。
199
+ if (requiresAuth) {
200
+ // このルートはログインされているかどうか認証が必要。
201
+ // もしされていないならば、ログインページにリダイレクトします。
202
+ firebase.auth().onAuthStateChanged(function(user) {
203
+ if (user) {
204
+ next();
205
+ } else {
206
+ next({
207
+ path: "/signin",
208
+ query: { redirect: to.fullPath },
209
+ });
210
+ }
211
+ });
212
+ } else {
213
+ next();
214
+ //同じ階層にある要素を取得できるが、対象要素の次に配置されている要素だけを取得。
215
+ }
216
+ });
217
+
218
+ export default router;
98
219
  ```