質問編集履歴

4

2020/10/25 14:04

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -254,7 +254,7 @@
254
254
 
255
255
  import { db } from '~/plugins/firebase.js'
256
256
 
257
- import { firebase } from '~/plugins/firebase.js'
257
+ import firebase from '~/plugins/firebase.js'
258
258
 
259
259
  import { ValidationObserver, ValidationProvider } from 'vee-validate'
260
260
 

3

誤字

2020/10/25 14:04

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  道場生の登録画面であるadd.vueでうった情報をindex.vueで表示させたいのですが、index.vueに表示されません。
40
40
 
41
- 原因を突き詰めていくとどうやらfirebase.firestore()がきちんとimportできていないのが原因ぽいですが何故importできないのかわからず困っています。s
41
+ 原因を突き詰めていくとどうやらfirebase.firestore()がきちんとimportできていないのが原因ぽいですが何故importできないのかわからず困っています。
42
42
 
43
43
 
44
44
 

2

原因が絞れたので編集

2020/10/25 06:41

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -36,9 +36,9 @@
36
36
 
37
37
  index.jsとadd.js以下のファイルは親子関係にあります。
38
38
 
39
- 道場生の登録画面であるadd.vueでうった情報をindex.vueで表示させたいのですが、
39
+ 道場生の登録画面であるadd.vueでうった情報をindex.vueで表示させたいのですが、index.vueに表示されません。
40
-
40
+
41
- `TypeError: studentsRef.add is not a function`とエラーが出index.vueに表示されせん
41
+ 原因を突き詰めていくとどうやらfirebase.firestore()がきちんとimportできていないのが原因ぽいですが何故importできないのかわからず困っs
42
42
 
43
43
 
44
44
 
@@ -46,9 +46,17 @@
46
46
 
47
47
 
48
48
 
49
- ```
49
+ ```vue
50
+
50
-
51
+ const db = firebase.firestore()
52
+
53
+ をadd.vueにかくと
54
+
55
+ client.js?06a0:97 TypeError: Cannot read property 'firestore' of undefined
56
+
57
+ 書かないと
58
+
51
- TypeError: studentsRef.add is not a function
59
+ client.js?06a0:97 TypeError: studentsRef.add is not a function と出る。
52
60
 
53
61
  ```
54
62
 
@@ -60,139 +68,313 @@
60
68
 
61
69
 
62
70
 
71
+ ```vue
72
+
73
+ <template>
74
+
75
+ <v-app>
76
+
77
+ <v-main>
78
+
79
+ <v-container>
80
+
81
+ <v-row>
82
+
83
+ <v-col>
84
+
85
+ <v-row justify="center">
86
+
87
+ <v-icon class="ml-5">
88
+
89
+ mdi-account
90
+
91
+ </v-icon>
92
+
93
+ <h1 class="ml-5">生徒管理</h1>
94
+
95
+ <v-spacer></v-spacer>
96
+
97
+ </v-row>
98
+
99
+ <v-divider color="blue"/>
100
+
101
+ </v-col>
102
+
103
+ </v-row>
104
+
105
+ <ValidationObserver ref="observer" v-slot="{ invalid }" immediate>
106
+
107
+ <v-form @submit.prevent="registration" v-model="valid">
108
+
109
+ <!-- <Name @send_name='sendName' /> -->
110
+
111
+ <v-row class="ml-5 mt-1" dense>
112
+
113
+ <!-- 道場生の姓名入力 -->
114
+
115
+ <v-col cols="2">
116
+
117
+ <ValidationProvider v-slot="{ errors, valid}" name="姓" rules="required|zenkaku">
118
+
119
+ <v-badge left color="error" content="必須">
120
+
121
+ <v-text-field
122
+
123
+ label="姓"
124
+
125
+ outlined
126
+
127
+ placeholder="田中"
128
+
129
+ v-model="familyName"
130
+
131
+ required
132
+
133
+ :error-messages="errors"
134
+
135
+ :success="valid"/>
136
+
137
+ </v-badge>
138
+
139
+ </ValidationProvider>
140
+
141
+ </v-col>
142
+
143
+ <v-col cols="2">
144
+
145
+ <ValidationProvider v-slot="{ errors, valid }" name="名" rules="required|zenkaku">
146
+
147
+ <v-text-field
148
+
149
+ label="名"
150
+
151
+ outlined
152
+
153
+ placeholder="太郎"
154
+
155
+ v-model="firstName"
156
+
157
+ required
158
+
159
+ :error-messages="errors"
160
+
161
+ :success="valid"/>
162
+
163
+ </ValidationProvider>
164
+
165
+ </v-col>
166
+
167
+ <v-col/>
168
+
169
+ <!-- 保護者氏名入力 -->
170
+
171
+ <v-col cols="2">
172
+
173
+ <ValidationProvider v-slot="{ errors, valid}" name="保護者姓" rules="required|zenkaku">
174
+
175
+ <v-badge left color="error" content="必須">
176
+
177
+ <v-text-field
178
+
179
+ label="保護者姓"
180
+
181
+ outlined
182
+
183
+ placeholder="田中"
184
+
185
+ v-model="parentsFamilyName"
186
+
187
+ required
188
+
189
+ :error-messages="errors"
190
+
191
+ :success="valid"/>
192
+
193
+ </v-badge>
194
+
195
+ </ValidationProvider>
196
+
197
+ </v-col>
198
+
199
+ <v-col cols="2">
200
+
201
+ <ValidationProvider v-slot="{ errors, valid}" name="保護者名" rules="required|zenkaku">
202
+
203
+ <v-text-field
204
+
205
+ label="保護者名"
206
+
207
+ outlined
208
+
209
+ placeholder="次郎"
210
+
211
+ v-model="parentsFirstName"
212
+
213
+ required
214
+
215
+ :error-messages="errors"
216
+
217
+ :success='valid'/>
218
+
219
+ </ValidationProvider>
220
+
221
+ </v-col>
222
+
223
+ <v-col/>
224
+
225
+ </v-row>
226
+
227
+ <v-row dense>
228
+
229
+ <v-col justify="center" align="center">
230
+
231
+ <v-btn type="submit" nuxt color="success" :disabled="invalid">送信</v-btn>
232
+
233
+ </v-col>
234
+
235
+ </v-row>
236
+
237
+ </v-form>
238
+
239
+ </ValidationObserver>
240
+
241
+ </v-container>
242
+
243
+ </v-main>
244
+
245
+ </v-app>
246
+
247
+ </template>
248
+
249
+
250
+
251
+ <script>
252
+
253
+ import { mapActions } from 'vuex'
254
+
255
+ import { db } from '~/plugins/firebase.js'
256
+
257
+ import { firebase } from '~/plugins/firebase.js'
258
+
259
+ import { ValidationObserver, ValidationProvider } from 'vee-validate'
260
+
261
+ import Name from '~/components/profile/Name.vue'
262
+
263
+ export default {
264
+
265
+ components : {
266
+
267
+ ValidationObserver,
268
+
269
+ ValidationProvider,
270
+
271
+ Name
272
+
273
+ },
274
+
275
+ data() {
276
+
277
+ return {
278
+
279
+ valid: false,
280
+
281
+ familyName: '',
282
+
283
+ firstName: '',
284
+
285
+ parentsFamilyName: '',
286
+
287
+ parentsFirstName: '',
288
+
289
+ }
290
+
291
+ },
292
+
293
+ // created: {
294
+
295
+ // sendName() {
296
+
297
+ // return ({firstName: this.firstName, familyName:this.familyName})
298
+
299
+ // }
300
+
301
+ // },
302
+
303
+ methods: {
304
+
305
+ async registration() {
306
+
307
+ const student = {
308
+
309
+ familyName: this.familyName,
310
+
311
+ firstName: this.firstName
312
+
313
+ }
314
+
315
+ const db = firebase.firestore() //これを入れるか入れないかでエラー内容が変わる。
316
+
317
+ const studentsRef = db.collection('students').doc('生徒一覧')
318
+
319
+ await studentsRef.add(student)
320
+
321
+ console.log(student)
322
+
323
+ // this.$router.push(`/`)
324
+
325
+ this.familyName = ''
326
+
327
+ this.firstName = ''
328
+
329
+ // await this.$store.dispatch('signUp',this.firstName)
330
+
331
+ // this.familyName = ''
332
+
333
+ // this.firstName = ''
334
+
335
+ },
336
+
337
+
338
+
339
+ },
340
+
341
+ }
342
+
343
+ </script>
344
+
345
+
346
+
347
+ ```
348
+
349
+
350
+
63
351
  ```js
64
352
 
65
- <template>
66
-
67
- <v-app>
68
-
69
- <v-main>
70
-
71
- <v-container>
72
-
73
- <v-row>
74
-
75
- <v-col>
76
-
77
- <v-row justify="center">
78
-
79
- <v-icon class="ml-5">
80
-
81
- mdi-account
82
-
83
- </v-icon>
84
-
85
- <h1 class="ml-5">生徒管理</h1>
86
-
87
- <v-spacer></v-spacer>
88
-
89
- </v-row>
90
-
91
- <v-divider color="blue"/>
92
-
93
- </v-col>
94
-
95
- </v-row>
96
-
97
- <!-- <ValidationObserver ref="observer" v-slot="{ invalid }" immediate> -->
98
-
99
- <v-form @submit.prevent="registration" v-model="valid">
100
-
101
- <Name/>
102
-
103
- <v-row dense>
104
-
105
- <v-col justify="center" align="center">
106
-
107
- <v-btn type="submit" nuxt color="success" :disabled="invalid">送信</v-btn>
108
-
109
- </v-col>
110
-
111
- </v-row>
112
-
113
- </v-form>
114
-
115
- <!-- </ValidationObserver> -->
116
-
117
- </v-container>
118
-
119
- </v-main>
120
-
121
- </v-app>
122
-
123
- </template>
124
-
125
-
126
-
127
- <script>
128
-
129
- import { mapActions } from 'vuex'
130
-
131
- import { db } from '~/plugins/firebase.js'
132
-
133
- import { ValidationObserver, ValidationProvider } from 'vee-validate'
134
-
135
- import Name from '~/components/profile/Name.vue'
136
-
137
- export default {
138
-
139
- components : {
140
-
141
- ValidationObserver,
142
-
143
- ValidationProvider,
144
-
145
- Name
146
-
147
- },
148
-
149
- data() {
150
-
151
- return {
152
-
153
- valid: false,
154
-
155
- }
156
-
157
- },
158
-
159
- methods: {
160
-
161
- async registration() {
162
-
163
- const student = {
164
-
165
- familyName : this.familyName,
166
-
167
- firstName : this.firstName,
168
-
169
- }
170
-
171
- console.log(this.firstName) // undefinedとでます。
172
-
173
- const studentsRef = db.collection('students').doc('生徒一覧')
174
-
175
- await studentsRef.add(student)
176
-
177
- // this.$router.push(`/`)
178
-
179
- this.familyName = ''
180
-
181
- this.firstName = ''
182
-
183
- // await this.$store.dispatch('signUp',this.firstName)
184
-
185
- // this.familyName = ''
186
-
187
- // this.firstName = ''
188
-
189
- }
190
-
191
- },
192
-
193
- }
194
-
195
- </script>
353
+ import * as firebase from "firebase/app";
354
+
355
+ import 'firebase/auth'
356
+
357
+ import 'firebase/firestore'
358
+
359
+
360
+
361
+ const firebaseConfig = {
362
+
363
+
364
+
365
+ };
366
+
367
+
368
+
369
+
370
+
371
+ firebase.initializeApp(firebaseConfig);
372
+
373
+ export default firebase;
374
+
375
+ const db = firebase.firestore();
376
+
377
+ export { db }
196
378
 
197
379
  ```
198
380
 
@@ -202,9 +384,7 @@
202
384
 
203
385
 
204
386
 
205
- console.log使用たが、undefinedと出した
387
+ 記事参照、コピペていすのでタイポミスはないように思います
206
-
207
-
208
388
 
209
389
  ### 補足情報(FW/ツールのバージョンなど)
210
390
 

1

状況が変わり、エラーが出るようになったので、内容の変更

2020/10/25 06:38

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,9 @@
36
36
 
37
37
  index.jsとadd.js以下のファイルは親子関係にあります。
38
38
 
39
- add.vueでうった情報をindex.vueで表示させたいのですが、エラーは出ませんが何も表示されません。
39
+ 道場生の登録画面であるadd.vueでうった情報をindex.vueで表示させたいのですが、
40
+
41
+ `TypeError: studentsRef.add is not a function`とエラーが出てindex.vueに表示されません。
40
42
 
41
43
 
42
44
 
@@ -46,7 +48,7 @@
46
48
 
47
49
  ```
48
50
 
49
- add.vueで入力した内容が反映されない
51
+ TypeError: studentsRef.add is not a function
50
52
 
51
53
  ```
52
54
 
@@ -92,17 +94,17 @@
92
94
 
93
95
  </v-row>
94
96
 
95
- <ValidationObserver ref="observer" v-slot="{ invalid }" immediate>
97
+ <!-- <ValidationObserver ref="observer" v-slot="{ invalid }" immediate> -->
96
98
 
97
99
  <v-form @submit.prevent="registration" v-model="valid">
98
100
 
99
- 〜略〜
101
+ <Name/>
100
102
 
101
103
  <v-row dense>
102
104
 
103
105
  <v-col justify="center" align="center">
104
106
 
105
- <v-btn type="submit" to="/" nuxt color="success" :disabled="invalid">送信</v-btn>
107
+ <v-btn type="submit" nuxt color="success" :disabled="invalid">送信</v-btn>
106
108
 
107
109
  </v-col>
108
110
 
@@ -110,7 +112,7 @@
110
112
 
111
113
  </v-form>
112
114
 
113
- </ValidationObserver>
115
+ <!-- </ValidationObserver> -->
114
116
 
115
117
  </v-container>
116
118
 
@@ -124,13 +126,23 @@
124
126
 
125
127
  <script>
126
128
 
127
- 〜略〜
129
+ import { mapActions } from 'vuex'
130
+
131
+ import { db } from '~/plugins/firebase.js'
132
+
133
+ import { ValidationObserver, ValidationProvider } from 'vee-validate'
134
+
135
+ import Name from '~/components/profile/Name.vue'
128
136
 
129
137
  export default {
130
138
 
131
139
  components : {
132
140
 
141
+ ValidationObserver,
142
+
143
+ ValidationProvider,
144
+
133
- 〜略〜
145
+ Name
134
146
 
135
147
  },
136
148
 
@@ -144,30 +156,36 @@
144
156
 
145
157
  },
146
158
 
147
-
148
-
149
159
  methods: {
150
160
 
151
- registration() {
161
+ async registration() {
152
-
162
+
153
- const student = {
163
+ const student = {
154
164
 
155
165
  familyName : this.familyName,
156
166
 
157
- firstName : this.firstName
167
+ firstName : this.firstName,
158
168
 
159
169
  }
160
170
 
161
- console.log(this.familyName)
171
+ console.log(this.firstName) // undefinedとでます。
162
-
172
+
163
- const studentsRef = db.collection('students')
173
+ const studentsRef = db.collection('students').doc('生徒一覧')
164
-
174
+
165
- studentsRef.add(student)
175
+ await studentsRef.add(student)
176
+
177
+ // this.$router.push(`/`)
166
178
 
167
179
  this.familyName = ''
168
180
 
169
181
  this.firstName = ''
170
182
 
183
+ // await this.$store.dispatch('signUp',this.firstName)
184
+
185
+ // this.familyName = ''
186
+
187
+ // this.firstName = ''
188
+
171
189
  }
172
190
 
173
191
  },
@@ -178,183 +196,13 @@
178
196
 
179
197
  ```
180
198
 
181
- #### index.vue
182
-
183
- ```js
184
-
185
-
186
-
187
- <v-data-table :headers="headers" dense :items="students">
188
-
189
- <template v-slot:body="{items: students}">
190
-
191
- <tbody>
192
-
193
- <tr v-for="(student, index) in students" :key="student.id">
194
-
195
- <td @click="detailData(index)">{{student.familyName}} {{student.firstName}}</td>
196
-
197
- <td>{{student.familyNameKana}} {{student.firstNameKana}}</td>
198
-
199
- <td>
200
-
201
- <v-select
202
-
203
- v-model="initial"
204
-
205
- :items="level"
206
-
207
- menu-props="auto"
208
-
209
- label="保持級"
210
-
211
- hide-details
212
-
213
- single-line
214
-
215
- style="width:150px;">
216
-
217
- </v-select>
218
-
219
- </td>
220
-
221
-
222
-
223
-
224
-
225
- <script>
226
-
227
- import { db } from '~/plugins/firebase.js'
228
-
229
- import { mapGetters, mapActions } from 'vuex'
230
-
231
- export default {
232
-
233
- data() {
234
-
235
- return {
236
-
237
- headers: [
238
-
239
- {
240
-
241
- text: '氏名',
242
-
243
- value: 'familyName' + 'firstName',
244
-
245
- },
246
-
247
- {
248
-
249
- text: 'フリガナ氏名',
250
-
251
- value: 'familyNameKana' + 'firstNameKana'
252
-
253
- },
254
-
255
- {
256
-
257
- text: '保有級',
258
-
259
- value: 'level'
260
-
261
- },
262
-
263
- {
264
-
265
- text: '年齢',
266
-
267
- value: 'age'
268
-
269
- },
270
-
271
- {
272
-
273
- text: '削除',
274
-
275
- value: 'delete',
276
-
277
- sortable: false,
278
-
279
- }
280
-
281
- ],
282
-
283
- familyName:'',
284
-
285
- firstName:'',
286
-
287
- familyNameKana: '',
288
-
289
- firstNameKana: '',
290
-
291
- familyName:'',
292
-
293
- firstName:'',
294
-
295
- familyNameKana: '',
296
-
297
- firstNameKana: '',
298
-
299
- familyName:'',
300
-
301
- firstName:'',
302
-
303
- familyNameKana: '',
304
-
305
- firstNameKana: '',
306
-
307
- initial: '無級',
308
-
309
- level: [
310
-
311
- '無級','10級','9級','8級','7級','6級','5級','4級','3級','2級','1級','初段','2段','3段','4段','5段','6段','7段'
312
-
313
- ]
314
-
315
- }
316
-
317
- },
318
-
319
- created: function () {
320
-
321
- this.$store.dispatch('add/init', db.collection('students'))
322
-
323
- },
324
-
325
- methods: {
326
-
327
- // age: function () {
328
-
329
- // return moment().diff(this.birthday, 'years')
330
-
331
- // }
332
-
333
- },
334
-
335
- computed: {
336
-
337
- ...mapGetters({students: 'getStudents' })
338
-
339
- },
340
-
341
- }
342
-
343
- </script>
344
-
345
-
346
-
347
- ```
348
-
349
199
 
350
200
 
351
201
  ### 試したこと
352
202
 
353
203
 
354
204
 
355
- console.logでadd.vueのregistraition関数の中の値を取得しようとしましたができませんでした。
356
-
357
- $emitなども使用してみましたが違うエラーが出ました。
205
+ console.logを使用しましたが、undefinedと出ました。
358
206
 
359
207
 
360
208