javascript - How to toggle class inside a loop of items in vue.js -

i'm new vue.js , have 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> 

i want toggle grey green when user clicks upvote button, user knows jokes upvoted.

in methods have:

  data () {     return {         jokes:[], //filled dynamically calling backend server         id: ''      }   },  methods: {     upvote: function(joke) {         joke.upvotes ++;         //how toggle grey green here?     } } 

how can achieve this? have tried different tricks tutorials change class of items, not 1 up-voted.

you need pass joke method, first of all.

v-on:click="upvote(joke)" 

then need add v-class it. either v-bind:class, or :class.

<div class="jokes" v-for="joke in jokes">   <strong>{{joke.body}}</strong>   <small>{{joke.upvotes}}</small>   <button v-on:click="upvote(joke)"><i class="fa fa-arrow-up" :class="{ green : joke.upvotes>0, grey: joke.upvotes<=0 }"></i></button> <div> 

example here

edit update. have affect 1 clicked on, , not upvoted jokes. need property on joke, know whether selected or not. lets say

joke.selected 

then...

<div class="jokes" v-for="joke in jokes">   <strong>{{joke.body}}</strong>   <small>{{joke.upvotes}}</small>   <button v-on:click="upvote(joke)"><i class="fa fa-arrow-up" :class="{green: joke.selected, grey: !joke.selected}"></i></button> <div> 

then in method

upvote: function(joke) {    joke.upvotes++;    if(!joke.selected){         joke.selected=true;    } 

}

example here

wiki