teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追記

2020/12/15 07:52

投稿

akakakakak
akakakakak

スコア0

title CHANGED
File without changes
body CHANGED
@@ -178,4 +178,14 @@
178
178
  ```
179
179
  をしてみるという方法も試してみたのですが上手くいきませんでした。
180
180
 
181
+ ・追記
182
+ ```
183
+ import TheHeader from '~/components/TheHeader.vue'
184
+ ```
185
+
186
+ ```
187
+ import TheHeader from './components/TheHeader.vue'
188
+ ```
189
+ に変えてみましたが何も変化は起きませんでした
190
+
181
191
  この問題の解決法についてお分かりの方がいらっしゃいましたらアドバイスよろしくお願いします。

1

index.vueの追加

2020/12/15 07:52

投稿

akakakakak
akakakakak

スコア0

title CHANGED
File without changes
body CHANGED
@@ -78,6 +78,94 @@
78
78
 
79
79
  ```
80
80
 
81
+ ```
82
+ **app/pages/index.vue**
83
+
84
+ <template>
85
+ <section class="container">
86
+ <div v-if="isWaiting">
87
+ <p>読み込み中</p>
88
+ </div>
89
+ <div v-else>
90
+ <div v-if="!isLogin">
91
+ <div>
92
+ <p>
93
+ <input v-model="email" type="text" placeholder="email">
94
+ </p>
95
+ <p>
96
+ <input v-model="password" type="password" placeholder="password">
97
+ </p>
98
+ <p>
99
+ <input id="checkbox" v-model="register" type="checkbox">
100
+ <label for="checkbox">新規登録</label>
101
+ </p>
102
+ <button @click="passwordLogin">{{ register ? '新規登録' : 'ログイン' }}</button>
103
+ <p>{{ errorMessage }}</p>
104
+ </div>
105
+ </div>
106
+ <div v-else>
107
+ <p>{{ user.email }}でログイン中</p>
108
+ <button @click="logOut">ログアウト</button>
109
+ </div>
110
+ </div>
111
+ </section>
112
+ </template>
113
+
114
+ <script>
115
+ import moment from '~/plugins/moment'
116
+ import { mapGetters } from 'vuex'
117
+
118
+ export default {
119
+ layout: 'default',
120
+ asyncData () {
121
+ return {
122
+ register: false,
123
+ isWaiting: true,
124
+ isLogin: false,
125
+ user: [],
126
+ email: '',
127
+ password: '',
128
+ errorMessage: ''
129
+ }
130
+ },
131
+ mounted: function () {
132
+ firebase.auth().onAuthStateChanged(user => {
133
+ this.isWaiting = false
134
+ this.errorMessage = ''
135
+ if (user) {
136
+ this.isLogin = true
137
+ this.user = user
138
+ } else {
139
+ this.isLogin = false
140
+ this.user = []
141
+ };
142
+ })
143
+ },
144
+ methods: {
145
+ passwordLogin () {
146
+ const email = this.email
147
+ const password = this.password
148
+ if (this.register) {
149
+ firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
150
+ const errorMessage = error.message
151
+ this.errorMessage = errorMessage
152
+ }.bind(this))
153
+ } else {
154
+ firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
155
+ const errorMessage = error.message
156
+ this.errorMessage = errorMessage
157
+ }.bind(this))
158
+ }
159
+ },
160
+ logOut () {
161
+ firebase.auth().signOut()
162
+ }
163
+ },
164
+ layout: 'default',
165
+ }
166
+ </script>
167
+ ```
168
+
81
169
  ### 試したこと
82
170
  このエラーについて調べてみたところ、やはりコンポーネントを認識できないときにおこるエラーのようでimportのファイル名の誤字脱字で解決という事例が多いようでそのあたりは確認してみたのですが見当たりませんでした。
83
171