尝试在 Vuejs 中删除与 Axios 的联系

Question

我正在开发一个应用程序来存储联系信息，并使用 Vuejs 和 Laravel 来完成它。我还在使用 axios 库来实现 CRUD 功能。

我在axios.delete() 上遇到此错误，我无法弄清楚。这是我的 Contacts.Vue 文件：

<script>
  export default {
    data: function(){
      return {
        edit:false,
        list:[],
        contact:{
          id:'',
          name:'',
          email:'',
          phone:''
        }
      }
    },
    mounted: function(){
      console.log('Contacts Component Loaded...');
      this.fetchContactList();
    },
    methods: {
      fetchContactList: function(){
        console.log('Fetching contacts...');
        axios.get('api/contacts').then((response) => {
          console.log(response.data);
          this.list = response.data;
        }).catch((error) => {
          console.log(error);
        });
      },
      createContact: function(){
        console.log('Creating contact...');
        let self = this;
        // merging params to the current object
        let params = Object.assign({}, self.contact);
        // pass above to axios request
        axios.post('api/contact/store', params)
          .then(function(){
            self.contact.name = '';
            self.contact.email = '';
            self.contact.phone = '';
            self.edit = false;
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      },
      showContact: function(id){
        let self = this;
        axios.get('api/contact/' + id)
          .then(function(response){
            self.contact.id = response.data.id;
            self.contact.name = response.data.name;
            self.contact.email = response.data.email;
            self.contact.phone = response.data.phone;
          })
          self.edit = true;
      },
      updateContact: function(id){
        console.log('Updating contact '+id+'...');
        let self = this;
        // merging params to the current object
        let params = Object.assign({}, self.contact);
        // pass above to axios request
        axios.patch('api/contact/'+id, params)
          .then(function(){
            self.contact.name = '';
            self.contact.email = '';
            self.contact.phone = '';
            self.edit = false;
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      },
      deleteContact: function(id){
        axios.delete('api/contact/'+id)
          .then(function(response){
            self.fetchContactList();
          })
          .catch(function(error){
            console.log(error);
          });
      }
    }
  }
</script>

我收到一条 TypeError 消息，指出 self.fetchContactList is not a function。

我知道它说值实际上不是一个函数。函数名称中没有错字。我是否在错误的对象上调用了该函数？我应该使用不同的属性名称吗？

我使用self.fetchContactList();添加和更新联系人，为什么不能删除联系人？

我需要添加请求标头吗？对于其他请求，我不必这样做。

如果我只是删除self.fetchContactList()，它将根本不起作用。

尽管出现错误，但当我刷新页面时，它会删除联系人，但我希望在单击删除按钮时删除联系人。

Answer 1

deleteContact 函数中没有let self = this; 行，显然会报错。

或者，您可以使用 ES6 箭头函数来避免将 this 分配给这样的单独变量：

deleteContact: function(id) {
  axios.delete('api/contact/'+id)
    .then((response) => {
      this.fetchContactList();
    })
    .catch((error) => {
      console.log(error);
    });
}