I'm just starting to learn vue.js and I'm working on a list of items:
<div class="jokes" v-for="joke in jokes">
<strong>{{joke.body}}</strong>
<small>{{joke.upvotes}}</small>
<button v-on:click="upvote"><i class="fa fa-arrow-up grey"></i></button>
<div>
My goal is to change the grey color to green when the user clicks the upvote button, so they can easily see which jokes they have upvoted.
In my methods section, I currently have:
data () {
return {
jokes:[], //populated dynamically from the backend server
id: ''
}
},
methods: {
upvote: function(joke) {
joke.upvotes ++;
//How can I toggle from grey to green here?
}
}
Can anyone help me figure out how to achieve this? I've tried several methods but all the tutorials seem to change the class for ALL items rather than just the one that was upvoted.