我是前端开发新手，但对 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 的代码片段：

      

      

        

          
{{ doc.title}}
          
          
 Short Description: {{ doc.shortDescription}}
          
Categorie: {{ doc.categorie }}
          
Comments: {{ doc.comments }}

          
            
{{ tag.name }}
          
          


          

            Show
            Update
            Delete
          
        
      
      
       

        
          Title:
          
        
        
          Mediatype:
          
        
        
          Short Description:
          
        
        
          Categorie:
          
        
        
          Comments:
          
        
        
          Tags:
          
        
        Create
      
    

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