As a newcomer to frontend development, I have a basic understanding of HTML5, CSS, and Javascript. Recently, I started working on a vue.js project where I integrated bootstrap and axios. Everything seemed to be working fine until I encountered an issue when trying to use the "show," "update," or "delete" buttons. Each time I clicked on them, I received an error message saying "Can't find variable: updateDocument," despite the method existing.
I am seeking guidance on where to debug this error. Here are some screenshots for reference:
https://i.sstatic.net/v2k7t.png
https://i.sstatic.net/ii3Me.png
Please find below additional information about my environment:
Node version: v18.15.0
NPM version: 9.0.5
Vue.js version: 3
Bootstrap version: 5.3
To rule out any issues with the data (specifically doc.id), I even tried replacing it with a fixed number in the code snippet from DocumentVault.vue:
<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>
It seems like the root cause lies within the updateDocument method that I've implemented. I've attempted two different variations of the method, but unfortunately, both resulted in the same error:
Variant 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);
});
}
Variant 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);
});
}
In addition, here is a snippet from main.js where I imported Bootstrap:
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'
Lastly, in App.vue, I included the DocumentVault component as follows:
import DocumentVault from './components/DocumentVault.vue'
export default {
name: 'App',
components: {
DocumentVault
}
}