我Vue的错误呈现部件

Question

我有一个 “VUE-CLI的WebPack” 这样的：

的src /组件/ Signin.vue：

<template> 
... 
        <form v-on:submit.prevent="userSignIn"> 
        ... 
        <div class="field"> 
         <p class="control has-icons-left has-icons-right"> 
         <input 
          v-validate="'required|email'" 
          v-bind:class="{'is-danger': errors.has('name')}" 
          name="email" 
          v-model="form.email" 
          class="input" 
          id="email" 
          type="email" 
          placeholder="Email" 
         > 
         <span class="icon is-small is-left"> 
          <i class="fa fa-envelope"></i> 
         </span> 
         <span class="icon is-small is-right"> 
          <i class="fa fa-check"></i> 
         </span> 
         <span class="help is-danger" v-show="errors.has('email')">{{ errors.first('email') }}</span> 
         </p> 
        </div> 
        <div class="field"> 
         <p class="control has-icons-left"> 
         <input 
          v-validate="'required|min:5'" 
          v-bind:class="{'is-danger': errors.has('name')}" 
          name="password" 
          v-model="form.password" 
          class="input" 
          id="password" 
          type="password" 
          placeholder="Password" 
         > 
         <span class="icon is-small is-left"> 
          <i class="fa fa-lock"></i> 
         </span> 
         <span class="help is-danger" v-show="errors.has('password')">{{ errors.first('password') }}</span> 
         </p> 
        </div> 
        <div class="field is-grouped"> 
         <div class="control"> 
         <button v-bind:disabled="errors.any()" class="button is-primary" type="submit" :disabled="loading"> 
             Submit 
            </button> 
         </div> 
        </div> 
        </form> 
... 
    </template> 

<script> 
... 
    export default { 
    data() { 
     return { 
     form: { 
      email: '', 
      password: '', 
      alert: false 
     } 
     } 
    }, 
    computed: { 
     error() { 
     return this.$store.getters.getError 
     }, 
     loading() { 
     return this.$store.getters.getLoading 
     } 
    }, 
    watch: { 
     error (value) { 
     if (value) { 
      this.alert = true 
     } 
     }, 
     alert (value) { 
     if (!value) { 
      this.$store.dispatch('setError', false) 
     } 
     }, 
     methods: { 
     userSignIn() { 
      this.$store.dispatch('userSignIn', {email: this.email, password: this.password}) 
     } 
     } 
    }, 
... 
    } 
</script> 

的src/App.vue：

<template> 
    <main> 
    <router-view></router-view> 
    </main> 
</template> 

<style lang="sass"> 
    @import "~bulma" 
    /* Your css for this file... */ 
</style> 

的src/main.js

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import firebase from 'firebase' 
import { store } from './store' 
import VeeValidate from 'vee-validate' 
import { firebaseConfig } from './config' 

Vue.use(VeeValidate) 
Vue.config.productionTip = false 
firebase.initializeApp(firebaseConfig) 

/* eslint-disable no-new */ 
const unsubscribe = firebase.auth() 
.onAuthStateChanged((firebaseUser) => { 
    new Vue({ 
    el: '#app', 
    router, 
    store, 
    render: h => h(App), 
    created() { 
     store.dispatch('autoSignIn', firebaseUser) 
    } 
    }) 
    unsubscribe() 
}) 

和点击按钮时出现两个错误：

Property or method "userSignIn" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Signin.vue?d58e:24 Uncaught TypeError: _vm.userSignIn is not a function

Answer 1

您已经在手表内定义了您的方法。将它们移到外面。

watch: { 
    error (value) { 
    if (value) { 
     this.alert = true 
    } 
    }, 
    alert (value) { 
    if (!value) { 
     this.$store.dispatch('setError', false) 
    } 
    }, 
}, 
methods: { 
    userSignIn() { 
     this.$store.dispatch('userSignIn', {email: this.email, password: this.password}) 
    } 
}