Ich bin neu in der Frontend-Entwicklung, verfüge aber über grundlegende Kenntnisse in HTML5, CSS und Javascript.

Ich habe ein vue.js-Projekt erstellt und Bootstrap und Axios hinzugefügt. Meine Anwendung lädt Daten und zeigt sie an. Wenn ich jedoch auf die Schaltfläche „Anzeigen“, „Aktualisieren“ oder „Löschen“ klicke, erhalte ich die Meldung „Variable nicht gefunden: updateDocument“, obwohl die Methode vorhanden ist.

Bitte sagen Sie mir, wo ich nach dem Fehler suchen soll.

Knotenversion v18.15.0 npm-Version 9.0.5 vue.js 3 boostrap v5.3

Um sicherzustellen, dass das Problem nicht durch die data-doc.id- verursacht wird, habe ich sie durch eine feste Nummer ersetzt.

Codeausschnitt von DocumentVault.vue:

 
 
 
 
{{ doc.title}} 
 
 Short Description: {{ doc.shortDescription}}
 
Categorie: {{ doc.categorie }}
 
Comments: {{ doc.comments }}
  
{{ tag.name }}
  

 
 Show Update Delete 
 
 
 
 
  Title:    Mediatype:    Short Description:    Categorie:    Comments:    Tags:   Create 
 

mounted() { axios.get("/api/documents").then((response) => { this.documents = response.data; console.info(this.documents) }).catch((error) => { this.errorMessage = "Failed to retrieve documents."; console.error(error); }); },

Ich habe 2 Methoden für diese Methode ausprobiert, aber der Fehler ist der gleiche

Variation A)

updateDocument: function (id) { axios.post(`/api/documents/${id}`).then(() => { this.documents = this.documents.filter((doc) => doc.id === id); }).catch((error) => { this.errorMessage = "Failed to update document."; console.error(error); }); },

Variation B)

updateDocument(id) { axios.post(`/api/documents/${id}`).then(() => { this.documents = this.documents.filter((doc) => doc.id === id); }).catch((error) => { this.errorMessage = "Failed to update document."; console.error(error); }); },

main.js

import 'bootstrap/dist/css/bootstrap.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') import 'bootstrap/dist/js/bootstrap.js'

App-Ansicht

import DocumentVault from './components/DocumentVault.vue' export default { name: 'App', components: { DocumentVault } }

methods: { updateDocument() { // your code } },

Show