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 文档的链接：声明方法