Vue.js 错误：TypeError: Cannot read properties of undefined (reading 'addEventListener') 解决方法

在使用 Vue.js 开发过程中，您可能会遇到以下错误信息：

vue.runtime.esm.js:619 [Vue warn]: Error in mounted hook: 'TypeError: Cannot read properties of undefined (reading 'addEventListener')'

found in

---> <DialogImageList> at src/components/DialogImageList/index.vue
       <CollectionPerson> at src/components/collection-management/collectionPerson.vue
         <ElTabPane> at packages/tabs/src/tab-pane.vue
           <ElTabs> at packages/tabs/src/tabs.vue
             <Index> at src/views/collection/management/index.vue
               <AppMain> at src/layout/components/AppMain.vue
                 <Layout> at src/layout/index.vue
                   <App> at src/App.vue
                     <Root>

该错误通常发生在 mounted 钩子函数中，表示您尝试访问一个未定义的属性，导致 'addEventListener' 方法无法执行。

解决方法

1. 在 mounted 钩子函数中添加条件检查：

   在使用该属性之前，先检查它是否存在，例如：

   mounted() {
     if (this.$refs.myElement) {
       this.$refs.myElement.addEventListener('click', this.handleClick)
     }
   }
   

2. 在模板中添加事件侦听器：

   使用 v-on 指令将事件侦听器直接添加到组件模板中，例如：

   <template>
     <div ref='myElement' @click='handleClick'>...</div>
   </template>
   

   这样，Vue 会在组件挂载后自动将事件侦听器添加到元素上。

通过以上方法，您可以有效解决 TypeError: Cannot read properties of undefined (reading 'addEventListener') 错误，确保您的 Vue 应用程序能够正常运行。