VueJs TypeError: "_vm.saveEmployee не является функцией" при отправке формы - PullRequest
Новая
       8

VueJs TypeError: "_vm.saveEmployee не является функцией" при отправке формы

0 голосов
/ 31 октября 2019

Я кодирую базу данных сотрудников в Vuejs, используя Firebase в качестве моего бэкэнда. На странице моего нового сотрудника я получаю 3 ошибки при отправке формы для добавления нового сотрудника.

"Свойство или метод" saveEmployee "не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойствореагирует либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. "

" [Vue warn]: ошибка в обработчике v-on: "TypeError: _vm.saveEmployee не являетсяfunction "

" 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, и я не могу найти исправление.

...