vue.js/bootstrap : méthode d'événement onclick non appelée, erreur "Variable introuvable : updateDocument"

Question

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 :

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

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
  }
}

Answer 1

Je suppose que vous utilisez l'API d'options, si c'est le cas, essayez ceci :

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

et modifiez votre événement de clic en : 

<button @click="updateDocument">Show</button>

Voici le lien vers la documentation vue : Méthode de déclaration