Vuejs内のAxiosとの連絡を削除しようとしています

Question

連絡先情報を保存し、VuejsとLaravelを利用してそれを行うアプリを開発しています。私はCRUD機能のためにaxiosライブラリも使用しています。

私はこのエラーがありますaxios.delete()私は把握することはできません。私はself.fetchContactList is not a functionことを言ってはTypeErrorメッセージを取得しています

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

：これは私のContacts.Vueファイルです。

私は値が実際には関数ではないということを知っています。関数名にはタイプミスはありません。私は間違ったオブジェクトの関数を呼び出しましたか？別のプロパティ名を使用すべきですか？

連絡先の追加と更新でself.fetchContactList();を使用しましたが、連絡先を削除するとどうして動作しませんか？

リクエストヘッダーを追加する必要はありますか？私は他の要求のためにする必要はなかった。

私が単にself.fetchContactList()を削除すると、まったく機能しません。

エラーが発生したにもかかわらず、ページを更新すると連絡先が削除されますが、削除ボタンをクリックすると連絡先が削除されます。

Answer 1

の機能にはlet self = this;行がありませんが、明らかにエラーが発生します。

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