vue.js/bootstrap: Onclick-Ereignismethode nicht aufgerufen, Fehler „Variable nicht gefunden: updateDocument“

Question

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

Answer 1

我假设您正在使用选项 API，如果是这样，请尝试以下操作：

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

并将您的点击事件更改为：

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

这里是 vue 文档的链接：声明方法