v-on处理程序中的错误:在以下位置找到“ TypeError:firebase_app__WEBPACK_IMPORTED_MODULE_4 ___ default.a.auth.createUserWithEmailAndPassword不是函数”

时间:2019-03-20 10:23:30

标签: firebase-authentication vuetify.js

我收到如下错误

错误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>

0 个答案:

没有答案