Question

我正在使用Firebase作为后端在Vuejs中编码员工数据库。在我的新员工页面上，提交表单以添加新员工时，我总是收到3个错误。

“属性或方法“ saveEmployee”未在实例上定义，而是在渲染过程中被引用。通过初始化属性，确保该属性在数据选项中或对于基于类的组件都是反应性的。” >

“ [Vue警告]：v-on处理程序中的错误：” TypeError：_vm.saveEmployee不是函数“

“ TypeError：“ _ vm.saveEmployee不是函数”

这是我的newemployee.vue文件的样子

<template>
  <div id="new-employee">
    <h3>New Employee</h3>
    <div class="row">
      <form @submit.prevent="saveEmployee" class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="employee_id" required />
            <label>Employee ID#</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="name" required />
            <label>Name</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="dept" required />
            <label>Department</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" v-model="position" required />
            <label>Name</label>
          </div>
        </div>
        <button type="submit" class="btn">Submit</button>
        <router-link to="/" class="btn grey">Cancel</router-link>
      </form>
    </div>
  </div>
</template>

<script>
import db from "./firebaseInit";
export default {
  name: "new-employee",
  data() {
    return {
      employee_id: null,
      name: null,
      dept: null,
      position: null
    };
  },
  methods: {
    saveEmployee() {
      db.collection("employees")
        .add({
          employee_id: this.employee_id,
          name: this.name,
          dept: this.dept,
          position: this.position
        })
        .then(docRef => {
          console.log("Client added: ", docRef.id);
          this.$router.push("/");
        })
        .catch(error => {
          console.error("Error adding employee: ", error);
        });
    }
  }
};
</script>

整个问题都在saveEmployee函数上，我找不到解决方法。

VueJs TypeError：表单提交上的“ _vm.saveEmployee不是函数”

0 个答案: