javascript - 添加事件监听vuejs

Question

你好，我正在使用 Vuejs。我正在循环中根据我的项目要求动态分配类名

:class="`card-${menu.name}`"

其中 menu.name 可以是 alpha、beta、zeta 等。

现在我想以不同的方式向每个类添加事件监听器，例如单击类卡-alpha 时执行 a1，单击类卡-beta 时执行 a2 等。请注意，我不能使用 @click="myfunc" 因为我希望在每个不同的类上执行不同的操作，所以它是其他的东西。你能帮我解决这个问题吗？非常感谢

这是我正在使用的代码，它不会工作，因为它只在安装代码时运行一次。那么如何在每次点击时触发这个函数呢？

mounted() {       
    document.querySelector('.card-alpha').addEventListener('click', () => { this.$state.val = 1; });       
    document.querySelector('.card-beta').addEventListener('click', () => { this.$state.val = 2; });     
},

Answer 1

您可以将值传递给函数，而无需安装 Hook 中的监听器:

const app = Vue.createApp({
  data() {
    return {
      items: [{id:1, name: 'alpha', val: 1}, {id:2, name: 'beta', val: 2}],
    };
  },
  methods: {
    myFunc(val) {
      // do other things
      // set your state with passed value
      //this.$state.val = val
      alert(val)
    }
  }
})
app.mount('#demo')

.card-beta {
  color: red;
}
.card-alpha {
  color: green;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="menu in items" :key="menu.id">
    <button :class="`card-${menu.name}`" @click="myFunc(menu.val)">
      {{ menu.id }}
    </button>
  </div>
</div>