CODEWITHSUNDEEP
vue.js
Galivan
Galivan

Reputation: 5328

Vue: Set active class - get current DOM element

I try to set a class "active" on the currently selected element. I don' use v-for. When clicking the element, I set event.target to the "selected" property. On each element I want to compare the current element with the one stored in "selected". But how do I get the current element?.

Or if there is a simpler way to achieve it, that would be interesting to see.

fiddle

Template:

<div id="app">
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button>
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button>
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button> 
</div>

Javascript:

new Vue({
  el: '#app',
  data: {
    message: 'Vue',
    selected: ''
  },

  methods: {

      test(event){
           console.log(event.target)
      this.selected = event.target        //set selected to the DOM element

    }
  }

})

CSS:

.active{
  background: blue;
}

Upvotes: 0

Views: 1639

Answers (1)

l2aelba
l2aelba

Reputation: 22167

Something like this… ?

<div id="app">
  <button :class="{'active': selected === 'a'}" @click="selected = 'a'">{{ message }}</button>
  <button :class="{'active': selected === 'b'}" @click="selected = 'b'">{{ message }}</button>
  <button :class="{'active': selected === 'c'}" @click="selected = 'c'">{{ message }}</button> 
</div>

Demo: https://jsfiddle.net/6gxz9y8q/

You can also use watchers to detect when values are changed. (demo), or run function as you did like (demo) or (demo), but don't do something like (demo)

Upvotes: 4

Related Questions