vue.js/bootstrap: kaedah acara onclick tidak dipanggil, ralat "Pembolehubah tidak ditemui: updateDocument"

Question

Saya baru dalam pembangunan bahagian hadapan tetapi mempunyai pemahaman asas tentang HTML5, CSS dan Javascript.

Saya mencipta projek vue.js dan menambahkan bootstrap dan axios. Aplikasi saya memuatkan data dan memaparkannya. Walau bagaimanapun, sebaik sahaja saya mengklik butang "Tunjukkan", "Kemas kini" atau "Padam", saya mendapat "Pembolehubah tidak dijumpai: kemas kiniDocument" walaupun kaedah itu wujud.

Sila beritahu saya di mana untuk mencari ralat.

Versi nod v18.15.0 npm versi 9.0.5 vue.js 3 boostrap v5.3

Untuk memastikan masalah bukan disebabkan oleh data-doc.id-, saya menggantikannya dengan nombor tetap.

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

Saya cuba 2 kaedah untuk kaedah ini, tetapi ralatnya adalah sama

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

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

Pandangan Apl

import DocumentVault from './components/DocumentVault.vue'

export default {
  name: 'App',
  components: {
    DocumentVault
  }
}

Answer 1

Saya mengandaikan anda menggunakan API pilihan, jika ya, cuba ini:

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

dan tukar acara klik anda kepada:

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

Berikut ialah pautan ke dokumentasi vue: Kaedah pengisytiharan