Vue.js - Add Class on Click Event

Question

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?

Answer 1

You can do something like this:

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

You can check the fiddle demonstrating this: Here