Is there any way to use addClass() to added a class on click in vueJs?

Question

I tried this code but not working. Is there any solution? Please help me. Thank you.

<div id="app">
  <li class="blah" @click="onClk">
     Divs to be clicked
  </li>
</div>

new Vue({
  el: '#app',
  methods: {
    onClk(e) {
        e.target.addClass('red');
    }
  }
})

Answer 1

classList is not the Vue.js way of declarative thinking. Ideally your code would be:

<div id="app">
  <li class="blah" @click="onClk" :class="{ red: isActive }">
    Divs to be clicked
  </li>
</div>


new Vue({
  el: '#app',

  data() {
    return {
      isActive: false
    };
  }

  methods: {
    onClk(e) {
      this.isActive = true;
    }
  }
})

Answer 2

You can use

 onClk(e) {
    e.target.classList.add('red');
 }

You can check demo here