Vue.js动态类绑定下为不同类元素添加点击事件的问题

方法1：Vue响应式方案（推荐） #

既然是循环渲染的元素，完全可以利用Vue的模板语法直接绑定对应逻辑，不用原生JS操作DOM，这也是Vue的最佳实践：

方式A：方法内分支处理（易维护） #

把不同类对应的操作统一放到一个方法里，通过传入menu.name判断执行逻辑：

<template>
  <div 
    v-for="menu in menus" 
    :key="menu.name"
    :class="`card-${menu.name}`"
    @click="handleCardClick(menu.name)"
  >
    <!-- 元素内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleCardClick(name) {
      switch(name) {
        case 'alpha':
          this.$state.val = 1;
          // 执行操作a1的其他逻辑
          break;
        case 'beta':
          this.$state.val = 2;
          // 执行操作a2的其他逻辑
          break;
        case 'zeta':
          this.$state.val = 3;
          // 执行操作a3的其他逻辑
          break;
        default:
          // 默认处理逻辑
          break;
      }
    }
  }
}
</script>

方式B：模板内直接判断（适合逻辑简单场景） #

如果逻辑非常简短，也可以直接在模板的@click里做分支判断：

<template>
  <div 
    v-for="menu in menus" 
    :key="menu.name"
    :class="`card-${menu.name}`"
    @click="
      menu.name === 'alpha' ? (this.$state.val = 1) :
      menu.name === 'beta' ? (this.$state.val = 2) :
      menu.name === 'zeta' ? (this.$state.val = 3) : ''
    "
  >
    <!-- 元素内容 -->
  </div>
</template>

方法2：原生事件委托（备选） #

如果必须用原生JS监听，要解决动态元素的绑定问题，推荐用事件委托——把监听绑定到父容器上，通过判断目标元素的类名执行对应逻辑，这样不管元素是何时渲染的都能触发：

<template>
  <div class="cards-container" ref="cardsContainer">
    <div 
      v-for="menu in menus" 
      :key="menu.name"
      :class="`card-${menu.name}`"
    >
      <!-- 元素内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.cardsContainer.addEventListener('click', (e) => {
      const target = e.target;
      if (target.classList.contains('card-alpha')) {
        this.$state.val = 1;
      } else if (target.classList.contains('card-beta')) {
        this.$state.val = 2;
      } else if (target.classList.contains('card-zeta')) {
        this.$state.val = 3;
      }
    });
  }
}
</script>

原代码失效原因 #

你之前的代码只在mounted执行一次，存在两个问题：

1. document.querySelector只能获取挂载时已存在的第一个匹配元素，循环生成的同类型元素只有第一个能触发事件；
2. 如果menus数据是异步加载的，挂载时元素还未渲染，根本获取不到目标元素，自然无法绑定监听。

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