I am new to front-end development but have a basic understanding of HTML5, CSS and Javascript.

I created a vue.js project and added bootstrap and axios. My application loads data and displays them. However, once I click the "Show", "Update" or "Delete" button, I get "Variable not found: updateDocument" although the method exists.

Please tell me where to find the error.

Node version v18.15.0 npm version 9.0.5 vue.js 3 boostrap v5.3

To make sure the problem is not caused by data-doc.id-, I replaced it with a fixed number.

Code snippet from 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); }); },

I tried 2 methods for this method, but the error was the same

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'

Application View

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

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

Show