Метод не определен в экземпляре, но на него ссылаются во время рендеринга в файле. vue

Question

import PageNav from '@/components/PageNav.vue';
import PageFooter from '@/components/PageFooter.vue';

export default {
  name: 'Groups',
  components: {
    PageNav,
    PageFooter,
  },
  data() {
    return {
      groups: [],
      error: '',
    };
  },
  methods: {
    fetchGroups() {
      const url = 'http://localhost:3000/groups';
      this.groups = [];
      fetch(url)
        .then((response) => {
          if (response.status === 200) {
            return response.json();
          }
          throw new Error(`Meh, error! Status ${response.status}`);
        })
        .then((groups) => {
          this.groups = groups;
        })
        .catch((error) => {
          this.error = error;
        });
    },
    removeGroup(groupId) {
      const url = `http://localhost:3000/groups/${groupId}`;
      fetch(url, {
        method: 'DELETE',
      })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .catch((error) => {
          this.error = error;
        });
    },
  },
  Add() {
    const inputName = document.getElementById('groepnaam');
    const group = { id: this.groups.length + 1, name: inputName.value };
    if (inputName.value === '') {
      window.alert('Vul een naam in!');
    } else {
      fetch('http://localhost:3000/groups',
        {
          method: 'POST',
          body: JSON.stringify(group),
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .then((response) => {
          if (response.status === 201) {
            return response.json();
          }
          throw new Error();
        });
    }
  },
  created() {
    this.fetchGroups();
  },
};

Учитывая код в теге script моего Vue файла, существует проблема, которую я не могу решить. Каждый определенный здесь метод работает нормально, за исключением метода Add (). Я получаю эту ошибку: «Свойство или метод« Добавить »не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство». Но чем этот метод отличается от остальных, к которым я обращаюсь?

Answer 1

Вы не определили это внутри methods.

Переместите его туда, и это должно исправить.

import PageNav from '@/components/PageNav.vue';
import PageFooter from '@/components/PageFooter.vue';

export default {
  name: 'Groups',
  components: {
    PageNav,
    PageFooter,
  },
  data() {
    return {
      groups: [],
      error: '',
    };
  },
  methods: {
    fetchGroups() {
      const url = 'http://localhost:3000/groups';
      this.groups = [];
      fetch(url)
        .then((response) => {
          if (response.status === 200) {
            return response.json();
          }
          throw new Error(`Meh, error! Status ${response.status}`);
        })
        .then((groups) => {
          this.groups = groups;
        })
        .catch((error) => {
          this.error = error;
        });
    },
    removeGroup(groupId) {
      const url = `http://localhost:3000/groups/${groupId}`;
      fetch(url, {
        method: 'DELETE',
      })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .catch((error) => {
          this.error = error;
        });
    },
   Add() {
    const inputName = document.getElementById('groepnaam');
    const group = { id: this.groups.length + 1, name: inputName.value };
    if (inputName.value === '') {
      window.alert('Vul een naam in!');
    } else {
      fetch('http://localhost:3000/groups',
        {
          method: 'POST',
          body: JSON.stringify(group),
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .then((response) => {
          if (response.status === 201) {
            return response.json();
          }
          throw new Error();
        });
    }
   }
  },
  created() {
    this.fetchGroups();
  },
};