質問編集履歴

2

内容変更

2021/07/05 13:24

投稿

TMTN
TMTN

スコア53

test CHANGED
@@ -1 +1 @@
1
- 【Vue x Firebase】updateProfileメソッドでユザー情報更新しが情報が反映されな
1
+ vue-paginateにて画面サイズに応じてペジ表示数変えたい
test CHANGED
@@ -1,471 +1,249 @@
1
- [ユーザーのプロフィールを更新する](https://firebase.google.com/docs/auth/web/manage-users?hl=ja#update_a_users_profile)参照しながら設定を行ました。
2
-
3
-
4
-
5
- 6月末にFirebaseのRealtimeDatabaseにてチャット機能を実装し、特に問題なかっのですが、
6
-
7
- 7月入って動作確認をすると自身のプロフィール情報(displayNameとphotoURL)が正しく表示されなくなりました・・。
8
-
9
-
10
-
11
- 新規登録時に以下のようにと初期アイコン設定しており、そこで設定された名前とアイコンは初期情報とて保存されマイページにも表示されすが
12
-
13
- ページにてプロフィール情報を更新すると「Storage」「Firestore」には正く情報が保存されいることは確認できて
14
-
15
- しかし、「displayName」と「photoURL」は更新されない状態です。
16
-
17
-
18
-
19
- #新規登録(signup.vue)
20
-
21
-
22
-
23
- ```ここに言語を入力
24
-
25
- signUp() {
26
-
27
- let self = this;
28
-
29
- firebase
30
-
31
- .auth()
32
-
33
- .createUserWithEmailAndPassword(this.email, this.password)
34
-
35
- .then(userCredential => {
36
-
37
- userCredential.user.updateProfile({
38
-
39
- displayName: self.name,
40
-
41
- photoURL: require("../assets/デフォルト画像.jpg")
42
-
43
- });
44
-
45
- this.$swal("登録に成功しました。", {
46
-
47
- icon: "success"
48
-
49
- });
50
-
51
- this.uid = userCredential.user.uid;
52
-
53
- return firebase
54
-
55
- .firestore()
56
-
57
- .collection("users")
58
-
59
- .doc(this.uid)
60
-
61
- .set({
62
-
63
- name: this.name,
64
-
65
- time: firebase.firestore.FieldValue.serverTimestamp(),
66
-
67
- uid: userCredential.user.uid
68
-
69
- });
70
-
71
- })
72
-
73
- .then(() => {
74
-
75
- this.$router.push(`/mypage/${this.uid}`);
76
-
77
- })
78
-
79
- .catch(() => {
80
-
81
- this.$swal("登録情報が正しくありません。", {
82
-
83
- icon: "error"
84
-
85
- });
86
-
87
- });
88
-
89
- }
90
-
91
- }
92
-
93
- };
1
+ #vue-paginateにて画面サイズに応じてページ表示数変えた
2
+
3
+
4
+
5
+ [Github](https://github.com/TahaSh/vue-paginate)を参考以下のようにページネーションを実装しまし
6
+
7
+
8
+
9
+ ページネーションを1つだけで実装して12つの投稿を表示しておりましたが、
10
+
11
+ レスポンシブを行スマホ用600pxに画像を縮小すると当たりですが12つの投稿表示してしまう為
12
+
13
+ 勝手としては不便だと思い、以下のように「PC・タブレット用ページネーション」と「スホ用ページネーション」と2つ分けて、画面サイズに応じて[display: none]と[display: flex]を使って表示・非表示をしてした
14
+
15
+
16
+
17
+ しかし、cssできちんとPC・タブレットの場合はPC・タブレット用ページネーションを優先してスマホ用は非表示、スマホの時はスマホ用ページネーションを優先して、PC・タブレット用は非表示としていますが、何故かスマホ用のページネーションを優先してしまい、投稿が常にページに5つ(スマホ用)になってしまいます。
18
+
19
+
20
+
21
+ ![イメージ説明](e828d924b797318e53a739740cd312f2.png)
22
+
23
+
24
+
25
+ 「PC・タブレット用ページネーション」と「スマホ用ページネーション」を綺麗に分ける方法はありますでしょうか。
26
+
27
+
28
+
29
+ 分かる方いらっしゃいましたらお力添えを頂きたいです。
30
+
31
+
32
+
33
+ もし他に良い方法があればご教示願います。
34
+
35
+
36
+
37
+ よろしくお願いいたします。
38
+
39
+
40
+
41
+
42
+
43
+ ```html
44
+
45
+ <template>
46
+
47
+ <div>
48
+
49
+ <Header />
50
+
51
+ <Search v-model="searchWord" />
52
+
53
+ <Post />
54
+
55
+ <div class="post">
56
+
57
+ <h2 id="top" class="post-tll neon">投稿一覧</h2>
58
+
59
+
60
+
61
+
62
+
63
+ <!-- PC・タブレット用ページネーション -->
64
+
65
+ <div class="post-inner paginate-pctb">
66
+
67
+ <div class="post-items">
68
+
69
+ <paginate
70
+
71
+ name="paginate-log"
72
+
73
+ tag="ol"
74
+
75
+ :list="filteredPostData"
76
+
77
+ :per="12"
78
+
79
+ v-if="filteredPostData.length !== 0"
80
+
81
+ >
82
+
83
+ <!-- filteredPostDataにて該当する投稿がある場合、表示。 -->
84
+
85
+ <List
86
+
87
+ v-for="(list, index) in paginated('paginate-log')"
88
+
89
+ :index="index"
90
+
91
+ :list="list"
92
+
93
+ :key="list.id"
94
+
95
+ />
96
+
97
+ </paginate>
98
+
99
+ <div v-else class="nothing">" {{searchWord}} " に該当する投稿はありませんでした。</div>
100
+
101
+ <!-- filteredPostDataにて該当する投稿がない場合、上記を表示させる。 -->
102
+
103
+ <paginate-links
104
+
105
+ for="paginate-log"
106
+
107
+ name="paginate-log"
108
+
109
+ class="pagination flex"
110
+
111
+ v-scroll-to="postTop"
112
+
113
+ :async="true"
114
+
115
+ :show-step-links="true"
116
+
117
+ :style="filteredPostData.length !== 0 == '' ? 'display:none;' : 'display:flex;'"
118
+
119
+ ></paginate-links>
120
+
121
+ <!-- filteredPostDataにて該当する投稿がない場合、非表示。投稿がある場合、表示。 -->
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+
128
+
129
+
130
+
131
+ <!-- スマホ用ページネーション -->
132
+
133
+ <div class="post-inner paginate-sp">
134
+
135
+ <div class="post-items">
136
+
137
+ <paginate
138
+
139
+ name="paginate-log"
140
+
141
+ tag="ol"
142
+
143
+ :list="filteredPostData"
144
+
145
+ :per="5"
146
+
147
+ v-if="filteredPostData.length !== 0"
148
+
149
+ >
150
+
151
+ <List
152
+
153
+ v-for="(list, index) in paginated('paginate-log')"
154
+
155
+ :index="index"
156
+
157
+ :list="list"
158
+
159
+ :userDatas="userDatas"
160
+
161
+ :key="list.id"
162
+
163
+ />
164
+
165
+ </paginate>
166
+
167
+ <div v-else class="nothing">" {{searchWord}} " に該当する投稿はありませんでした。</div>
168
+
169
+ <paginate-links
170
+
171
+ for="paginate-log"
172
+
173
+ name="paginate-log"
174
+
175
+ class="pagination flex"
176
+
177
+ v-scroll-to="postTop"
178
+
179
+ :async="true"
180
+
181
+ :show-step-links="true"
182
+
183
+ :style="filteredPostData.length !== 0 == '' ? 'display:none;' : 'display:flex;'"
184
+
185
+ ></paginate-links>
186
+
187
+ </div>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ </div>
194
+
195
+ </template>
94
196
 
95
197
  ```
96
198
 
97
199
 
98
200
 
99
- 以下はマイページ更新するコンポーネントになりますが、mypageeditxllg.vueと名前にあるように
100
-
101
- 「mypageeditxllg.vue(1024px以下1025px以上)」「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」とレスポンブするために
102
-
103
- コンポーネントで分けて作成しております。
104
-
105
-
106
-
107
- #マイページ更新(mypageeditxllg.vue)
108
-
109
-
110
-
111
- ```ここに言語を入力
112
-
113
- methods: {
114
-
115
- onFileChange(e) {
116
-
117
- const image = e.target.files; //選択された画像ファイルを選択
118
-
119
- this.file = image[0]; //画像ファイルを1つだけ選択
120
-
121
- const S =
122
-
123
- "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
124
-
125
- const N = 16;
126
-
127
- this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N)))
128
-
129
- .map((n) => S[n % S.length])
130
-
131
- .join("");
132
-
133
- // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入
134
-
135
- let self = this;
136
-
137
- let fileReader = new FileReader();
138
-
139
- //FileReaderは、Fileオブジェクトからデータを読み込むことのみを目的としたオブジェクト
140
-
141
- fileReader.onload = function() {
142
-
143
- //fileReader.onloadは、読み込みが正常に完了した時に発火するイベント
144
-
145
- self.preview = fileReader.result;
146
-
147
- //fileReaderの結果をself.previewへ代入
148
-
149
- //関数の中ではfileReaderの[this]を参照してしまうため、一旦[self]に代入して、[this]の代わりに[self] とする
150
-
151
- };
152
-
153
- fileReader.readAsDataURL(this.file);
154
-
155
- //this.fileの値をデータURLとして読み込み、458行目(fileReader.result)が発火する。
156
-
157
- },
158
-
159
- updateBtn() {
160
-
161
- this.$swal({
162
-
163
- title: "内容確認",
164
-
165
- text: "この内容で更新しますか?",
166
-
167
- icon: "info",
168
-
169
- buttons: true,
170
-
171
- dangerMode: true,
172
-
173
- })
174
-
175
- .then((willDelete) => {
176
-
177
- if (willDelete) {
178
-
179
- let uploadParam = {};
180
-
181
- if (this.uploadUrl) {
182
-
183
- const uploadTask = firebase
184
-
185
- .storage()
186
-
187
- .ref(this.uploadUrl) //さっき決めたパスを参照して、
188
-
189
- .put(this.file); //this.fileへ保存する
190
-
191
- uploadTask.then(() => {
192
-
193
- uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
194
-
195
- //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。
196
-
197
- this.$set(this, "uploadedImage", {
198
-
199
- fileUrl: fileUrl,
200
-
201
- time: firebase.firestore.FieldValue.serverTimestamp(),
202
-
203
- });
204
-
205
- uploadParam = { uploadedImage: this.uploadedImage };
206
-
207
- //選択されたプロフィール画像含めプロフィール情報をfirestoreへ保存
208
-
209
- firebase
210
-
211
- .firestore()
212
-
213
- .collection("users") //保存する場所を参照して、
214
-
215
- .doc(this.$route.params.uid)
216
-
217
- .set(
218
-
219
- {
220
-
221
- name: this.name,
222
-
223
- sex: this.sex,
224
-
225
- age: this.age,
226
-
227
- access: this.access,
228
-
229
- selfpr: this.selfpr,
230
-
231
- profession: this.profession,
232
-
233
- genre: this.genre,
234
-
235
- favMovie: this.favMovie,
236
-
237
- ...uploadParam,
238
-
239
- time: firebase.firestore.FieldValue.serverTimestamp(),
240
-
241
- },
242
-
243
- { merge: true }
244
-
245
- //set()でmergeをtrueにすると、上書き。updetaと同様。
246
-
247
- )
248
-
249
- .then(() => {
250
-
251
- this.$router.go({
252
-
253
- path: `/mypage/${this.$route.params.uid}`,
254
-
255
- force: true,
256
-
257
- });
258
-
259
- })
260
-
261
- .catch(() => {
262
-
263
- this.$swal("更新出来ませんでした。", {
264
-
265
- icon: "error",
266
-
267
- });
268
-
269
- });
270
-
271
- const currentUser = firebase.auth().currentUser;
272
-
273
- currentUser.updateProfile({
274
-
275
- photoURL: fileUrl,
276
-
277
- });
278
-
279
- });
280
-
281
- });
282
-
283
- } else {
284
-
285
- firebase
286
-
287
- //プロフィール画像が選択されなかった場合、画像以外のプロフィール情報をfirestoreへ保存
288
-
289
- .firestore()
290
-
291
- .collection("users")
292
-
293
- .doc(this.$route.params.uid)
294
-
295
- .set(
296
-
297
- {
298
-
299
- name: this.name,
300
-
301
- sex: this.sex,
302
-
303
- age: this.age,
304
-
305
- access: this.access,
306
-
307
- selfpr: this.selfpr,
308
-
309
- profession: this.profession,
310
-
311
- genre: this.genre,
312
-
313
- favMovie: this.favMovie,
314
-
315
- ...uploadParam,
316
-
317
- time: firebase.firestore.FieldValue.serverTimestamp(),
318
-
319
- },
320
-
321
- { merge: true }
322
-
323
- )
324
-
325
- .then(() => {
326
-
327
- this.$router.go({
328
-
329
- path: `/mypage/${this.$route.params.uid}`,
330
-
331
- force: true,
332
-
333
- });
334
-
335
- })
336
-
337
- .catch(() => {
338
-
339
- this.$swal("更新出来ませんでした。", {
340
-
341
- icon: "error",
342
-
343
- });
344
-
345
- });
346
-
347
- }
348
-
349
- } else {
350
-
351
- this.$swal("キャンセルしました。");
352
-
353
- }
354
-
355
- })
356
-
357
- .catch(() => {
358
-
359
- this.$swal("更新出来ませんでした。", {
360
-
361
- icon: "error",
362
-
363
- });
364
-
365
- this.preview = "";
366
-
367
- //更新をキャンセルした場合、this.previewを空にする。
368
-
369
- });
370
-
371
- },
201
+ ```css
202
+
203
+ .paginate-pctb {
204
+
205
+ @include pc {
206
+
207
+ display: flex ;
208
+
209
+ }
210
+
211
+ @include tab {
212
+
213
+ display: flex ;
214
+
215
+ }
216
+
217
+ @include sp {
218
+
219
+ display: none ;
220
+
221
+ }
222
+
223
+ }
224
+
225
+
226
+
227
+ .paginate-sp {
228
+
229
+ @include pc {
230
+
231
+ display: none ;
232
+
233
+ }
234
+
235
+ @include tab {
236
+
237
+ display: none ;
238
+
239
+ }
240
+
241
+ @include sp {
242
+
243
+ display: flex ;
244
+
245
+ }
246
+
247
+ }
372
248
 
373
249
  ```
374
-
375
-
376
-
377
- #気になることと試したこと
378
-
379
-
380
-
381
- ⑴6月末に動作確認した際には特に問題なかったが、7月入って動作確認すると動作に問題が発生したことが大変気になっております。特にconsole上でエラーもでてない状況です。
382
-
383
-
384
-
385
- ⑵マイページ更新にて以下でアイコン情報をphotoURLに格納しているのですが、試しに一度変数を「currentUser」から「user」としてしたところ正しく更新したアイコンが表示されたのですが、2度目以降また正しく更新されなくなりました。
386
-
387
-
388
-
389
- ```ここに言語を入力
390
-
391
- const currentUser = firebase.auth().currentUser;
392
-
393
- currentUser.updateProfile({
394
-
395
- photoURL: fileUrl,
396
-
397
- });
398
-
399
- ```
400
-
401
-
402
-
403
- 6月末に動作確認した際には特に問題なかったことと、試しに一度変数を「currentUser」から「user」としてしたところ正しく更新したアイコンが表示されたことからコードには問題ないようにも思えました。
404
-
405
-
406
-
407
- ⑶6月末に動作確認以降に行ったこととして、コードは大きく変えてないのですが、「mypageeditxllg.vue(1024px以下1025px以上)」「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」と画面に応じてサイズを変えたく、コンポーネントで細分化しました。分けたことが原因なのでしょうか。
408
-
409
-
410
-
411
- ---
412
-
413
-
414
-
415
- 分かる方いらっしゃいましたらお力添えを頂きたいです。
416
-
417
-
418
-
419
- 宜しくお願い致します。
420
-
421
-
422
-
423
- #追記1
424
-
425
-
426
-
427
- 以下をそれぞれに追加しましたが、「mypageeditxllg.vue(1024px以下1025px以上)」では、画像と名前ともに変更され、表示されることは確認できましたが、なぜか「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更がされません・・・
428
-
429
-
430
-
431
- ちなみに「mypageeditxllg.vue(1024px以下1025px以上)」のコードをそのままコピーして間違いないことを確認できております。
432
-
433
-
434
-
435
- しかし、原因が分からない状況です・・・
436
-
437
-
438
-
439
- 原因が分かる方いらっしゃいませんでしょうか。
440
-
441
-
442
-
443
- ```ここに言語を入力
444
-
445
- const currentUser = firebase.auth().currentUser;
446
-
447
- currentUser.updateProfile({
448
-
449
- displayName: this.name,
450
-
451
- photoURL: fileUrl
452
-
453
- });
454
-
455
-
456
-
457
- ~ 省略 ~
458
-
459
-
460
-
461
-
462
-
463
- const currentUser = firebase.auth().currentUser;
464
-
465
- currentUser.updateProfile({
466
-
467
- displayName: this.name
468
-
469
- });
470
-
471
- ```

1

追記

2021/07/05 13:24

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -417,3 +417,55 @@
417
417
 
418
418
 
419
419
  宜しくお願い致します。
420
+
421
+
422
+
423
+ #追記1
424
+
425
+
426
+
427
+ 以下をそれぞれに追加しましたが、「mypageeditxllg.vue(1024px以下1025px以上)」では、画像と名前ともに変更され、表示されることは確認できましたが、なぜか「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更がされません・・・
428
+
429
+
430
+
431
+ ちなみに「mypageeditxllg.vue(1024px以下1025px以上)」のコードをそのままコピーして間違いないことを確認できております。
432
+
433
+
434
+
435
+ しかし、原因が分からない状況です・・・
436
+
437
+
438
+
439
+ 原因が分かる方いらっしゃいませんでしょうか。
440
+
441
+
442
+
443
+ ```ここに言語を入力
444
+
445
+ const currentUser = firebase.auth().currentUser;
446
+
447
+ currentUser.updateProfile({
448
+
449
+ displayName: this.name,
450
+
451
+ photoURL: fileUrl
452
+
453
+ });
454
+
455
+
456
+
457
+ ~ 省略 ~
458
+
459
+
460
+
461
+
462
+
463
+ const currentUser = firebase.auth().currentUser;
464
+
465
+ currentUser.updateProfile({
466
+
467
+ displayName: this.name
468
+
469
+ });
470
+
471
+ ```