Vue.js中如何为指定class的所有元素绑定点击事件触发对应方法

• 你当前的代码把给.carousel-cell-card元素绑定点击事件的逻辑写在了handleTileClick方法内部，该方法本身没有触发入口，事件监听自然不会被注册
• 在Vue实例方法内直接调用handleTileClick会找不到变量，需要用this.handleTileClick指向实例上挂载的方法
• Vue开发更推荐使用框架自带的事件绑定能力，而非原生操作DOM绑定事件，可避免内存泄漏、动态元素绑定失效等问题

给所有带.carousel-cell-card类的元素直接加@click="handleTileClick"即可，这是最符合Vue设计规范的写法，修改后代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <p class="carousel-cell-card" @click="handleTileClick">
  my friend bob
  </p>
</div>

new Vue({
  el: "#app",
  data: {
 
  },
  methods: {
    handleTileClick: function(){
      alert("You have got mail")
      window.top.$("body").append(`<div>My Div goes here!</div>`);
    }
  }
})

把绑定逻辑放到mounted生命周期钩子中执行，此时实例已挂载完成，DOM已经渲染完成可以正常选中对应元素，同时需要在实例销毁前解绑事件避免内存泄漏：

new Vue({
  el: "#app",
  data: {
 
  },
  // 实例挂载完成后执行绑定
  mounted() {
    const tiles = document.querySelectorAll(".carousel-cell-card")
    tiles.forEach(tile => tile.addEventListener('click', this.handleTileClick))
  },
  // 实例销毁前解绑事件
  beforeDestroy() {
    const tiles = document.querySelectorAll(".carousel-cell-card")
    tiles.forEach(tile => tile.removeEventListener('click', this.handleTileClick))
  },
  methods: {
    handleTileClick: function(){
      alert("You have got mail")
      window.top.$("body").append(`<div>My Div goes here!</div>`);
    }
  }
})

如果.carousel-cell-card是动态新增的元素，可以用事件委托的方式实现无需重复绑定：

mounted() {
  document.getElementById('app').addEventListener('click', (e) => {
    // 判断点击的元素是否带目标类名
    if (e.target.classList.contains('carousel-cell-card')) {
      this.handleTileClick()
    }
  })
}

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