Je suis nouveau dans le développement front-end mais j'ai une compréhension de base de HTML5, CSS et Javascript.

J'ai créé un projet vue.js et ajouté bootstrap et axios. Mon application charge les données et les affiche. Cependant, une fois que je clique sur le bouton « Afficher », « Mettre à jour » ou « Supprimer », j'obtiens « Variable introuvable : updateDocument » bien que la méthode existe.

Veuillez me dire où chercher l'erreur.

Version du nœud v18.15.0 npm version 9.0.5 vue.js 3 boostrap v5.3

Pour m'assurer que le problème ne vient pas du data-doc.id-, je l'ai remplacé par un numéro fixe.

Extrait de code de 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); }); },

J'ai essayé 2 méthodes pour cette méthode, mais l'erreur est la même

Variante 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); }); },

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

Vue de l'application

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

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

Show