Versuch, den Kontakt mit Axios innerhalb von Vuejs zu löschen

Question

Ich entwickle eine App, um Kontaktinformationen zu speichern und Vuejs und Laravel dazu zu verwenden. Ich benutze auch die Axios-Bibliothek für CRUD-Funktionalität.

Ich habe diesen Fehler auf axios.delete() Ich kann nicht herausfinden. Das ist meine Contacts.Vue Datei:

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

Ich bin eine Typeerror-Nachricht immer sagen, dass self.fetchContactList is not a function.

Ich weiß, dass es sagt, dass der Wert keine Funktion ist. Der Funktionsname enthält keinen Tippfehler. Habe ich die Funktion auf dem falschen Objekt aufgerufen? Sollte ich einen anderen Namen verwenden?

Ich verwendete self.fetchContactList(); zum Hinzufügen und Aktualisieren von Kontakten, warum funktioniert es nicht mit dem Löschen des Kontakts?

Muss ich Anforderungsheader hinzufügen? Ich musste für die anderen Anfragen nicht.

Wenn ich einfach entfernen self.fetchContactList() wird es überhaupt nicht funktionieren.

Trotz des Fehlers, wenn ich die Seite aktualisiere, löscht es den Kontakt, aber ich möchte den Kontakt gelöscht, indem Sie auf die Schaltfläche Löschen klicken.

Answer 1

Sie haben keine let self = this; Zeile in deleteContact Funktion, offensichtlich würden Sie einen Fehler erhalten.

alternativ können Sie ES6 Pfeil-Funktionen verwenden zu vermeiden this Zuweisung Variable wie folgt zu trennen:

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