teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Vue.js】classのv-bindでvuexのstateの値を参照すると「"RangeError: Maximum call stack size exceeded"」が発生する

編集履歴

質問編集履歴

5

情報を追記

2020/02/23 09:53

投稿

take-t.t.
take-t.t.

スコア360

title CHANGED
@@ -1,1 +1,1 @@
1
- Vueでfirebaseでログインすると「Error in render: "RangeError: Maximum call stack size exceeded"」が発生してしまう
1
+ 【Vue.js】classのv-bindでvuexのstateの値を参照すると「"RangeError: Maximum call stack size exceeded"」が発生する
body CHANGED
@@ -1,7 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
  いつもお世話になっております。
3
3
 
4
- 現在vue-cli3を使い開発を行っているのですが、firebaseのグーグルアカウントでログインすると「Error in render: "RangeError: Maximum call stack size exceeded"」というエラーメッセージとともにVueが止まってしまい、v-if等のディレクティブ効かなくなってしまいました。
4
+ 現在vue-cli3を使い開発を行っているのですが、firebaseを用いてグーグルアカウントでログインを行いページが切り替わると、「__Error in render: "RangeError: Maximum call stack size exceeded"__」というエラーメッセージとともにVueが止まってしまい、`v-bind`等のディレクティブが効かなくなってしまいました。
5
+
5
6
  consoleを見るにエラーメッセージが無限に増えていくので、以下のコード内で「何らかの処理」が無限に繰り返されているようです。
6
7
  ログイン中のみ起こっており、ログアウトするか別のページに切り替えると収まります。
7
8
 
@@ -9,46 +10,53 @@
9
10
 
10
11
  完全に手詰まりになっています、どうか皆様お力添えをお願いいたします。
11
12
 
13
+ ###### **※追記**
14
+ `.home`と`.authentication__button`の2つの`class`の`v-bind`で、`loginUser`を参照している事が原因かもしれません。
15
+ 一つを消すと「__Error in render: "RangeError: Maximum call stack size exceeded"__」のメッセージ自体は出るものの、それも一度だけであり、無限ループは起きていませんでした。
16
+
17
+ ２つ以上すると無限ループするのでしょうか...？
18
+ 調べてもそこら辺りの情報は出てこず、結局分かりませんでした。
19
+
20
+ 詳しい方、よろしければご教授お願いいたします。
21
+
12
22
  ### 該当部分のコード
13
23
  ※Vuexのstateから読み込んでいる`loginUser`はログインした時にユーザー情報を格納する変数です。
14
- これを`v-if`で参照することでログイン・非ログイン時の表示を切り替えています。
24
+ これを`class`の`v-bind`と`computed`で参照する事でログイン・非ログイン時の表示を切り替えています。
15
25
 
16
26
  ```html
17
27
  <template>
18
- <section class="home">
19
- <div class="home__wrapper" :class="{'home__wrapper--logged-in': loginUser}">
28
+ <section class="home" :class="{'home--logged-in': loginUser}">
20
- <div class="title">
29
+ <div class="title">
21
- <img class="title__logo" :src="require('@/assets/images/card-background.png')">
30
+ <img class="title__logo" :src="require('@/assets/images/card-background.png')">
22
- <div class="title__contents">
31
+ <div class="title__contents">
23
- <h1 class="title__heading">Online Book Manager</h1>
32
+ <h1 class="title__heading">Online Book Manager</h1>
24
- <h2 class="title__ruby">読書記録が保存できるオンライン本棚</h2>
33
+ <h2 class="title__ruby">読書記録が保存できるオンライン本棚</h2>
25
- <p class="title__description">
34
+ <p class="title__description">
26
- <span v-html="usage.logo"></span>
35
+ <span v-html="usage.icon"></span>
27
- {{ usage.description }}
36
+ {{ usage.description }}
28
- </p>
29
- </div>
30
- </div>
31
-
32
- <div class="authentication">
33
- <p class="authentication__sentence">
34
- <span v-html="instructions"></span>
35
37
  </p>
36
- <a
37
- class="authentication__button"
38
- :class="{'authentication__button--logged-in': loginUser}"
39
- @click="authenticate"
40
- >
41
- <span v-html="authentication.logo"></span>
42
- {{ authentication.processing }}
43
- </a>
44
38
  </div>
45
39
  </div>
40
+
41
+ <div class="authentication">
42
+ <p class="authentication__sentence">
43
+ <span v-html="instructions"></span>
44
+ </p>
45
+ <a
46
+ class="authentication__button"
47
+ :class="{'authentication__button--logged-in': loginUser}"
48
+ @click="authenticate"
49
+ >
50
+ <span v-html="authentication.icon"></span>
51
+ {{ authentication.processing }}
52
+ </a>
53
+ </div>
46
54
  </section>
47
55
  </template>
48
56
  ```
49
- ※authentication.js内にある`this.$swal～`はvue-sweetalert2というライブラリです。`.then`で繋がっている`if(result.value)～`以降がalertでOKを押した場合の処理になります。
57
+ ※mixinで読み込んでいる`authentication`はfirebaseのログインに関する処理です。
50
- そして`login`・`logout`はfirebaseのSDKのもの、`onLoading`は他コンポーネントにあるローディング画面を表示するための処理です。
58
+ 処理自体はsweetalert2で`alert`を出して、それによりfirebaseの`login`・`logout`を実行するという単純なものです。
51
- ただauthentication.jsのコードは弄っていないので、この部分は関係ないかもしれません。
59
+ こちらは動いていた時から弄っていないので、今回は関係ないと思い詳しくは載せていません。
52
60
 
53
61
  ```JavaScript
54
62
  import { mapState } from 'vuex';
@@ -69,12 +77,12 @@
69
77
  usage() {
70
78
  if(!this.loginUser) {
71
79
  return {
72
- logo: '<i class="fas fa-arrow-circle-down"></i>',
80
+ icon: '<i class="fas fa-arrow-circle-down"></i>',
73
81
  description: 'アプリの利用にはログインが必要です。'
74
82
  }
75
83
  } else {
76
84
  return {
77
- logo: '<i class="fas fa-arrow-circle-up"></i>',
85
+ icon: '<i class="fas fa-arrow-circle-up"></i>',
78
86
  description: '左上のタブから本を登録できます。'
79
87
  }
80
88
  }
@@ -85,12 +93,12 @@
85
93
  authentication() {
86
94
  if(!this.loginUser) {
87
95
  return {
88
- logo: '<i class="fas fa-sign-in-alt"></i>',
96
+ icon: '<i class="fas fa-sign-in-alt"></i>',
89
97
  processing: 'Sign in'
90
98
  }
91
99
  } else {
92
100
  return {
93
- logo: '<i class="fas fa-sign-out-alt"></i>',
101
+ icon: '<i class="fas fa-sign-out-alt"></i>',
94
102
  processing: 'Sign out'
95
103
  }
96
104
  }
@@ -113,65 +121,10 @@
113
121
  }
114
122
  };
115
123
  ```
116
- ```JavaScript
117
- //authentication.js
118
- import { mapState, mapActions } from 'vuex';
119
124
 
120
- export const authentication = {
121
- computed: {
122
- ...mapState(['active'])
123
- },
124
- methods: {
125
- signIn() {
126
- this.$swal({
127
- type: 'question',
128
- title: 'Confirm',
129
- text: 'ログインしますか？',
130
- showCancelButton: true,
131
- showCloseButton: true,
132
- }).then(result => {
133
- if(result.value) {
134
- if(this.$route.name !== 'home') this.$router.push({name: 'home'});
135
- if(this.active) this.toggleDrawer();
136
- this.onLoading();
137
- this.login();
138
- }
139
- });
140
- },
141
- signOut() {
142
- this.$swal({
143
- type: 'question',
144
- title: 'Confirm',
145
- text: 'ログアウトしてもよろしいですか？',
146
- showCancelButton: true,
147
- showCloseButton: true,
148
- }).then(result => {
149
- if(result.value) {
150
- this.logout();
151
- if(this.$route.name !== 'home') this.$router.push({name: 'home'});
152
- this.onLoading();
153
- this.$swal({
154
- toast: true,
155
- position: 'top-end',
156
- type: 'success',
157
- title: 'ログアウトしました',
158
- showConfirmButton: false,
159
- timer: 1500,
160
- onAfterClose() {
161
- location.reload(true);
162
- }
163
- });
164
- }
165
- });
166
- },
167
- ...mapActions(['login', 'logout', 'onLoading', 'toggleDrawer'])
168
- }
169
- };
170
- ```
171
-
172
125
  ### 過去の動いていたコード
173
126
  ※主な違いは、マスタッシュ構文を使って表示を切り替えているか、または`v-if`を使ってそれを行っているか。
174
- `class`の`v-bind`を使っているか否か、の２つです。
127
+ その分のcssの変更を`class`の`v-bind`を使って行っているか否か、の２つです。
175
128
 
176
129
  ```html
177
130
  <template>

4

情報を追記

2020/02/23 09:53

投稿

take-t.t.
take-t.t.

スコア360

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
  いつもお世話になっております。
3
+
3
4
  現在vue-cli3を使い開発を行っているのですが、firebaseのグーグルアカウントでログインすると「Error in render: "RangeError: Maximum call stack size exceeded"」というエラーメッセージとともにVueが止まってしまい、v-if等のディレクティブ効かなくなってしまいました。
4
5
  consoleを見るにエラーメッセージが無限に増えていくので、以下のコード内で「何らかの処理」が無限に繰り返されているようです。
5
6
  ログイン中のみ起こっており、ログアウトするか別のページに切り替えると収まります。
@@ -121,9 +122,7 @@
121
122
  ...mapState(['active'])
122
123
  },
123
124
  methods: {
124
- loginProcessing() {
125
+ signIn() {
125
- if(this.$route.name !== 'home') this.$router.push({name: 'home'});
126
-
127
126
  this.$swal({
128
127
  type: 'question',
129
128
  title: 'Confirm',
@@ -132,14 +131,14 @@
132
131
  showCloseButton: true,
133
132
  }).then(result => {
134
133
  if(result.value) {
134
+ if(this.$route.name !== 'home') this.$router.push({name: 'home'});
135
135
  if(this.active) this.toggleDrawer();
136
-
137
136
  this.onLoading();
138
137
  this.login();
139
138
  }
140
139
  });
141
140
  },
142
- logoutProcessing() {
141
+ signOut() {
143
142
  this.$swal({
144
143
  type: 'question',
145
144
  title: 'Confirm',
@@ -171,7 +170,9 @@
171
170
  ```
172
171
 
173
172
  ### 過去の動いていたコード
174
- ※主な違いは、２つの`aタグ`でログインボタンの`authentication__login-button`と`authentication__logout-button`を`v-if`・`v-else`していたか、一つの`aタグ`内でそれを行っているかです。
173
+ ※主な違いは、マスタッシュ構文を使って表示を切り替えているか、または`v-if`を使ってそれを行っているか。
174
+ `class`の`v-bind`を使っているか否か、の２つです。
175
+
175
176
  ```html
176
177
  <template>
177
178
  <section class="home">

3

コードを編集

2020/02/22 20:18

投稿

take-t.t.
take-t.t.

スコア360

title CHANGED
File without changes
body CHANGED
@@ -22,40 +22,23 @@
22
22
  <h1 class="title__heading">Online Book Manager</h1>
23
23
  <h2 class="title__ruby">読書記録が保存できるオンライン本棚</h2>
24
24
  <p class="title__description">
25
- <template v-if="!loginUser">
26
- <i class="fas fa-arrow-circle-down"></i>
27
- アプリの利用にはログインが必要です。
28
- </template>
29
- <template v-else>
30
- <i class="fas fa-arrow-circle-up"></i>
25
+ <span v-html="usage.logo"></span>
31
- 左上のタブから本を登録できます。
32
- </template>
26
+ {{ usage.description }}
33
27
  </p>
34
28
  </div>
35
29
  </div>
36
30
 
37
31
  <div class="authentication">
38
32
  <p class="authentication__sentence">
39
- <template v-if="!loginUser">
40
- <span v-html="tag"><!-- Google --></span>アカウントでOnline Book Managerにログインします。
33
+ <span v-html="instructions"></span>
41
- </template>
42
- <template v-else>
43
- Online Book Managerからログアウトします。
44
- </template>
45
34
  </p>
46
35
  <a
47
36
  class="authentication__button"
48
37
  :class="{'authentication__button--logged-in': loginUser}"
49
- @click="authenticationProcessing"
38
+ @click="authenticate"
50
39
  >
51
- <template v-if="!loginUser">
52
- <i class="fas fa-sign-in-alt"></i>
40
+ <span v-html="authentication.logo"></span>
53
- Sign in
54
- </template>
55
- <template v-else>
41
+ {{ authentication.processing }}
56
- <i class="fas fa-sign-out-alt"></i>
57
- Sign out
58
- </template>
59
42
  </a>
60
43
  </div>
61
44
  </div>
@@ -82,6 +65,35 @@
82
65
  }
83
66
  },
84
67
  computed: {
68
+ usage() {
69
+ if(!this.loginUser) {
70
+ return {
71
+ logo: '<i class="fas fa-arrow-circle-down"></i>',
72
+ description: 'アプリの利用にはログインが必要です。'
73
+ }
74
+ } else {
75
+ return {
76
+ logo: '<i class="fas fa-arrow-circle-up"></i>',
77
+ description: '左上のタブから本を登録できます。'
78
+ }
79
+ }
80
+ },
81
+ instructions() {
82
+ return !this.loginUser ? `${this.tag}アカウントでOnline Book Managerにログインします。` : 'Online Book Managerからログアウトします。'
83
+ },
84
+ authentication() {
85
+ if(!this.loginUser) {
86
+ return {
87
+ logo: '<i class="fas fa-sign-in-alt"></i>',
88
+ processing: 'Sign in'
89
+ }
90
+ } else {
91
+ return {
92
+ logo: '<i class="fas fa-sign-out-alt"></i>',
93
+ processing: 'Sign out'
94
+ }
95
+ }
96
+ },
85
97
  ...mapState(['loginUser']),
86
98
  },
87
99
  methods: {
@@ -90,11 +102,11 @@
90
102
  this.tag += `<span class="insert${++index}">${character}</span>`;
91
103
  })
92
104
  },
93
- authenticationProcessing() {
105
+ authenticate() {
94
106
  if(!this.loginUser) {
95
- this.loginProcessing();
107
+ this.signIn();
96
108
  } else {
97
- this.logoutProcessing();
109
+ this.signOut();
98
110
  }
99
111
  }
100
112
  }

2

情報を追記

2020/02/22 20:05

投稿

take-t.t.
take-t.t.

スコア360

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,10 @@
1
1
  ### 前提・実現したいこと
2
2
  いつもお世話になっております。
3
3
  現在vue-cli3を使い開発を行っているのですが、firebaseのグーグルアカウントでログインすると「Error in render: "RangeError: Maximum call stack size exceeded"」というエラーメッセージとともにVueが止まってしまい、v-if等のディレクティブ効かなくなってしまいました。
4
- consoleを見るにエラーメッセージが無限に増えていくので、以下のコード内で「何かの処理」が無限に繰り返されているようです。
4
+ consoleを見るにエラーメッセージが無限に増えていくので、以下のコード内で「何らかの処理」が無限に繰り返されているようです。
5
+ ログイン中のみ起こっており、ログアウトするか別のページに切り替えると収まります。
5
6
 
6
- しかし再帰関数はありませんし、Vue Devtoolsで確認しても特にコンポーネント内の関数が無限に実行されている形跡はなく、自分で見る限りでは問題を発見できませんでした。
7
+ 原因を解明しようにも再帰関数はありませんし、Vue Devtoolsで確認しても特にコンポーネント内の関数が無限に実行されている形跡はなく、自分で見る限りでは問題を発見できませんでした。
7
8
 
8
9
  完全に手詰まりになっています、どうか皆様お力添えをお願いいたします。
9
10
 

1

情報を追記

2020/02/22 18:00

投稿

take-t.t.
take-t.t.

スコア360

title CHANGED
File without changes
body CHANGED
@@ -155,4 +155,67 @@
155
155
  ...mapActions(['login', 'logout', 'onLoading', 'toggleDrawer'])
156
156
  }
157
157
  };
158
+ ```
159
+
160
+ ### 過去の動いていたコード
161
+ ※主な違いは、２つの`aタグ`でログインボタンの`authentication__login-button`と`authentication__logout-button`を`v-if`・`v-else`していたか、一つの`aタグ`内でそれを行っているかです。
162
+ ```html
163
+ <template>
164
+ <section class="home">
165
+ <div class="title">
166
+ <div class="title__wrapper">
167
+ <h1 class="title__ruby">読書記録が保存できるオンライン本棚</h1>
168
+ <h1 class="title__heading">Online Book Manager</h1>
169
+ </div>
170
+ <p class="title__description">
171
+ <template v-if="!loginUser">
172
+ <i class="fas fa-arrow-circle-right"></i><!-- PC -->
173
+ <i class="fas fa-arrow-circle-down"></i><!-- スマホータブレット -->
174
+ アプリの利用にはログインが必要です。
175
+ </template>
176
+ <template v-else>
177
+ <i class="fas fa-arrow-circle-up"></i>
178
+ 左上のタブから本を登録できます。
179
+ </template>
180
+ </p>
181
+ </div>
182
+
183
+ <div class="authentication">
184
+ <p class="authentication__sentence">
185
+ <span class="sentence-title">
186
+ <template v-if="!loginUser">
187
+ <span v-html="tag"><!-- Google --></span>アカウントでログイン
188
+ </template>
189
+ <template v-else>
190
+ ログアウト
191
+ </template>
192
+ </span>
193
+ <span class="sentence-description">
194
+ <template v-if="!loginUser">
195
+ GoogleアカウントでOnline Book Managerにログインします。
196
+ </template>
197
+ <template v-else>
198
+ Online Book Managerからログアウトします。
199
+ </template>
200
+ </span>
201
+ </p>
202
+ <a
203
+ class="authentication__login-button"
204
+ v-if="!loginUser"
205
+ @click="loginProcessing"
206
+ >
207
+ <i class="fas fa-sign-in-alt"></i>
208
+ LOGIN
209
+ </a>
210
+ <a
211
+ class="authentication__logout-button"
212
+ v-else
213
+ @click="logoutProcessing"
214
+ >
215
+ <i class="fas fa-sign-out-alt"></i>
216
+ LOGOUT
217
+ </a>
218
+ </div>
219
+ </section>
220
+ </template>
158
221
  ```