vue.js / bootstrap：未呼叫 onclick 事件方法，錯誤“找不到變數：updateDocument”

Question

我是前端開發新手，但對 HTML5、CSS 和 Javascript 有基本了解。

我建立了一個 vue.js 專案並加入了 bootstrap 和 axios。 我的應用程式會載入數據並顯示它們。但是，一旦我單擊“顯示”、“更新”或“刪除”按鈕，儘管該方法存在，但我會收到“找不到變數：updateDocument”。

請告訴我在哪裡找錯誤。

節點版本v18.15.0 npm 版本 9.0.5 vue.js 3 boostrap v5.3

為了確保問題不是由資料-doc.id-引起的，我將其替換為固定數字。

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

對於這個方法我嘗試了2種方法，但錯誤都是一樣的

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

變體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'

應用程式視圖

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 文件的連結：宣告方法

#