CODEWITHSUNDEEP
javascriptcsseventsonclickvue.js
Adam McKenna
Adam McKenna

Reputation: 2435

Vue.js - Add Class on Click Event

I would like to dynamically toggle a class on a click event on a div in Vue.js without using properties/data to do so.

Here is my div

<div class="quiz-item" @click="checkAnswer(1)">

When this div is clicked, I would like to add the class quiz-item--correct or quiz-item--incorrect (the logic for this will be handled elsewhere). I cannot use properties as there are too many answers in the quiz for it to be a maintainable/viable approach.

Does anyone have any ideas on how I can achieve this functionality?

Upvotes: 8

Views: 35974

Answers (1)

abhishekkannojia
abhishekkannojia

Reputation: 2856

You can do something like this: 

<div class="quiz-item" @click="$event.target.classList.toggle('classname')">

You can check the fiddle demonstrating this: Here

Upvotes: 23

Related Questions