Add event listener vuejs

Question

Hello I am working with Vuejs. I am assigning class names dynamically based on my project requirement, in a loop

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

Where menu.name can be alpha, beta,zeta etc.

Now I want to add event listener to each class differently like do a1 when click on class card-alpha, do a2 when click on class card-beta and so on. Please see that I cannot use @click="myfunc" since I want different things to be done on each different class, so its something else. Can you help me with this. Thanks a lot

Here is the code which I am using and which wont work as it only runs once when the code is mounted. So how to trigger this function everytime on click?

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

hey mate, can you add little more context to your question? It's not clear enough , at least for me, what you are truing to achieve. — Nikola Pavicevic
– Nikola Pavicevic, Commented Oct 8, 2022 at 7:52
mounted() { document.querySelector('.card-alpha').addEventListener('click', () => { this.$state.val = 1; }); document.querySelector('.card-beta').addEventListener('click', () => { this.$state.val = 2; }); }, this is inside mounted function. How should I trigger it everytime the button is clicked? — learner
– learner, Commented Oct 8, 2022 at 7:54
Please use the "Edit" link (just below the tags to your question) to add code to the question, where it can be formatted and readable, and also permanent (since comments are transitory). — David Thomas
– David Thomas, Commented Oct 8, 2022 at 8:32

Nikola Pavicevic · Accepted Answer · 2022-10-08 08:10:29Z

2

You can pass value to your function, without listeners in mounted 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>

edited Oct 8, 2022 at 8:10

answered Oct 8, 2022 at 8:04

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add event listener vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related