我有Vue错误呈现组件

Question

I have a "vue-cli webpack" like the following :

src/components/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()
})

and I get two errors when I click the button :

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

You've defined your methods inside your watch. Move them outside.

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})
    }
}