Issue
Here is the situation, I use v-for to display lots of data in JSON as seperate buttons. What I want to do is when i click single one of those buttons, the button's background color will change. I want to use @click to bind function to each button, and in that function, do as this
theButtonDOM.style.backgroundColor = 'black';
So, how can I get that DOM whose div element is generated by v-for? OR any other solution to solve this 'background color change' problem?
Solution
Any time you trigger a click event in Vue template, you can access the event adding the special variable $event as argument to the function.
<button @click="my_method($event, other_argument)"></button>
and then access the target of the event inside the method:
methods: {
my_method(event, other_paramethers) {
let button = event.target
}
}
Even just with bind the method to the @click
event without any argument, you can access the event as your first argument.
<button @click="my_method"></button>
...
methods: {
my_method($event) {
let button = $event.target
}
}
Then you can play with your button.
Look at this stackoverflow question and the Vue documentation for more details.
Answered By - JoseVL92
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.