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

Question

I'm new to vue.js and have this 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 to toggle the grey to green when user clicks upvote button, so that the user knows what jokes she upvoted.

in the methods I have:

  data () {
    return {
        jokes:[], //filled dynamically by calling backend server
        id: ''

    }
  },

methods: {
    upvote: function(joke) {
        joke.upvotes ++;
        //how to toggle grey to green here?
    }
}

How can I achieve this? I have tried different tricks but all the tutorials change the class ALL of the items, not the one up-voted.

Kylie · Accepted Answer · 2017-08-22 14:50:45Z

3

You need to pass the joke to the method, first of all.

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

Then you need to add a v-class to it. Either with v-bind:class, or just :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. To have it only affect the one you clicked on, and not all upvoted jokes. You need a property on the joke, to know whether you selected it or not. So 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 your method

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

}

EXAMPLE HERE

edited Aug 22, 2017 at 14:50

answered Aug 22, 2017 at 14:08

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Karlom Over a year ago

It does not work. I guess because joke.upvotes>0 it not a suitable conditionals. Supposes that the joke.upvotes is already>0 since it is upvoted by others. changing the class should not depend on that value.

Kylie Over a year ago

Are you sure you're passing the joke as an argument?? Thats an easy one to miss. upvote(joke)

Karlom Over a year ago

Well the joke.upvotes value comes from backend database. I removed that part for the sake of simplicity. but joke.upvoted is a local to the user so has nothing to do the backend.

Karlom Over a year ago

The difference of my case with the jsfiddle of yours is that in my data I have jokes:[] and it's dynamically filled with data received through axios.

Kylie Over a year ago

The fact that youre using Axios, vs my object, shouldnt matter at all. Forget joke.upvoted. Do my second suggestion. :class="{ green : joke.upvotes>0, grey: joke.upvotes<=0 } Dont need the boolean, reads straight from the upvotes and applies the class

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related