我收到如下错误
错误1。
[Vue warn]: Error in v-on handler: "TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_4___default.a.auth.createUserWithEmailAndPassword is not a function"
found in---> Signup at src/components/User/Signup.vue
VApp
App at src/App.vue
Root vue.runtime.esm.js:619
错误2。
TypeError: "firebase_app__WEBPACK_IMPORTED_MODULE_4___default.a.auth.createUserWithEmailAndPassword is not a function"
signUserUp index.js:60 wrappedActionHandler vuex.esm.js:721 dispatch vuex.esm.js:428 boundDispatch vuex.esm.js:322 onSignup Signup.vue:87 submit Signup.vue:37 invokeWithErrorHandling3VueJS
vue.runtime.esm.js:1887
我该如何解决?我也尝试使用import firebase from 'firebase'
代码:
// main.js
import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import './plugins/vuetify'
import App from './App.vue'
import router from './router/index'
import { store } from './store/index'
import Vuelidate from 'vuelidate'
import DateFilter from './filters/date'
Vue.config.productionTip = false
Vue.filter('date', DateFilter);
Vue.use(Vuelidate)
/*eslint-disable no-new*/
new Vue({
el: '#app',
validations: {},
router: router,
store: store,
render: h => h(App),
created() {
firebase.initializeApp({
apiKey: "AIzaSyBE08FvhBq4x2-yPIjgn1hWi4jlxD97lj8",
authDomain: "meetup-b1fea.firebaseapp.com",
databaseURL: "https://meetup-b1fea.firebaseio.com",
projectId: "meetup-b1fea",
storageBucket: "meetup-b1fea.appspot.com",
messagingSenderId: "418778891704"
})
}
})
//
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- signUp.Vue-->
<template>
<v-container class="signup_contain">
<v-layout>
<v-flex xs12 sm6 md5 offset-sm3 offset-md4>
<v-card>
<v-card-text>
<v-container>
<form @submit.prevent="onSignup">
<v-layout>
<v-flex>
<v-text-field
name="email"
label="Mail"
id="email"
v-model="email"
type="email"
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex>
<v-text-field
name="password"
label="Password"
id="password"
v-model="password"
type="password"
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex>
<v-text-field
name="confirmPassword"
label="Confirm Password"
id="confirmPassword"
v-model="confirmPassword"
type="password"
:rules=[passwordRule]
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex>
<v-btn type="submit">
Sign up
</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data() {
return {
email: '',
password: '',
confirmPassword: ''
}
},
computed: {
passwordRule() {
return this.password !== this.confirmPassword ? 'password is not match' : '';
}
},
methods: {
onSignup() {
//vuex
this.$store.dispatch('signUserUp', {
email: this.email,
password: this.password
})
}
}
}
</script>
<style scoped>
.signup_contain {
position: absolute;
top: 60px;
}
</style>