vue.js/bootstrap: Onclick-Ereignismethode nicht aufgerufen, Fehler „Variable nicht gefunden: updateDocument“
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:
<div v-else>
<ul v-for="doc in documents" :key="doc.id" >
<div class="card" >
<div class="card-body">
<h4 class="card-header">{{ doc.title}}
</h4>
<p class="card-text"> Short Description: {{ doc.shortDescription}}</p>
<p class="card-text">Categorie: {{ doc.categorie }}</p>
<p class="card-text">Comments: {{ doc.comments }}</p>
<a class="card-text" v-for="tag in doc.tags" :key="tag.id">
<div class="badge bg-info" >{{ tag.name }}</div>
</a>
<br><br>
<div class="card-footer">
<button onclick=updateDocument(1) type="button" class="btn btn-outline-primary">Show</button>
<button onclick=updateDocument(doc.id) type="button" class="btn btn-outline-primary">Update</button>
<button onclick=deleteDocument(doc.id) type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
</div>
</ul>
<form @submit.prevent="submitForm">
<label>
Title:
<input v-model="title" type="text" required />
</label>
<label>
Mediatype:
<input v-model="mediatype" type="text" required />
</label>
<label>
Short Description:
<input v-model="shortDescription" type="text" required />
</label>
<label>
Categorie:
<input v-model="categorie" type="text" required />
</label>
<label>
Comments:
<textarea v-model="comments"></textarea>
</label>
<label>
Tags:
<input v-model="tags" type="text" />
</label>
<button type="submit">Create</button>
</form>
</div>
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
}
}