[Vuejs]-In vuejs, how to pass the html element when click a element?

by

0👍

✅

You should think about states for that. Avoid thinking the jQuery way in these situations because it will make your component less reactive to its state.

You could have a class attached to the button that depends on the state of it. When clicked, you change the state and then it would change the class applied to it. Check out the example:

http://jsfiddle.net/taokbg7q/

<button :class="{clicked: btnClicked}" @click="clickBtn"> My Button </button>

// ...

data: {
    btnClicked: false
},
methods: {
    clickBtn() {
        this.btnClicked = true
    }
}

// ...

.clicked {
  background-color: red;
}
👤João Menighin

0👍

you can use style and class as dynamicly:

    <button v-on:click="clicked()" :style="{color: 
      myColor}">Change my color</button

      data(){
         return {
           myColor: 'black'
         } 
        }
         methods: {
             clicked (){
             this.myColor = 'red';
        }
       }
👤Hozhabr

0👍

Bind a dynamic inline style to button and change its value with an event handler.

HTML

<div id="app">
  <button v-on:click="clicked" :style="{color: activeColor}">Change my color</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    activeColor: null
  },
  methods: {
    clicked() {
      this.activeColor = 'red'
    }
  }
});
👤Quentin Veron

Leave a comment