Vue中EventListener未触发求助：点击元素无响应且无控制台报错

核心问题 #

你用原生DOM方法绑定点击事件不生效，本质是违背了Vue的响应式设计逻辑：

• Vue会根据数据变化重新渲染DOM，你手动绑定的事件会在DOM重新渲染后丢失；
• 调用markAsRead时，可能对应的.markasread元素还没完成渲染，或者之后被Vue替换，导致事件绑定根本没作用到实际点击的元素上；
• 每次调用markAsRead都会重复绑定事件，就算生效也会引发重复触发的问题。

正确实现方式 #

Vue里完全不需要手动操作DOM绑定事件，直接用Vue的内置事件绑定语法即可：

方案1：模板直接绑定（推荐）

如果这三个.markasread元素是在当前组件模板里，直接给每个元素加@click：

<template>
  <!-- 假设三个X元素的结构 -->
  <div class="markasread" @click="handleMarkRead(1)">X1</div>
  <div class="markasread" @click="handleMarkRead(2)">X2</div>
  <div class="markasread" @click="handleMarkRead(3)">X3</div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    handleMarkRead(type) {
      this.$parent.markingAsRead = false;
      this.isLoading = false;
      type === 1 ? console.log('test 1') : console.log('test 2');
    },
    markAsRead(articleid) {
      this.isLoading = true;
      this.$parent.markingAsRead = true;
      this.$eventBus.$emit('articleRemove', articleid);
      this.titleAcross = '';   
    }
  }
}
</script>

方案2：事件委托（适合动态生成的元素）

如果元素是动态生成的，没法直接在模板绑定，就在父元素上绑定事件，通过target判断点击的目标：

<template>
  <div class="parent-container" @click="handleParentClick">
    <!-- 动态生成的.markasread元素 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick(e) {
      const target = e.target;
      if (!target.classList.contains('markasread')) return;
      
      // 判断是第几个元素
      const nodes = Array.from(this.$el.querySelectorAll('.markasread'));
      const index = nodes.indexOf(target);
      
      this.$parent.markingAsRead = false;
      this.isLoading = false;
      if (index === 1) console.log('test 1');
      else if (index === 2) console.log('test 2');
    },
    markAsRead(articleid) {
      this.isLoading = true;
      this.$parent.markingAsRead = true;
      this.$eventBus.$emit('articleRemove', articleid);
      this.titleAcross = '';   
    }
  }
}
</script>

额外提示 #

• 尽量不要直接操作DOM，Vue的核心是数据驱动视图，所有视图交互都应该通过数据或Vue提供的API处理；
• 不要直接修改$parent的数据，建议通过props或事件的方式和父组件通信，避免组件耦合度过高。

内容的提问来源于stack exchange，提问作者Pony