javascript - 如何在 vue.js 中的项目循环内切换类

Question

我是 vue.js 新手，有以下项目列表:

<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>

我想切换 grey至green当用户点击upvote时按钮，以便用户知道她点赞了哪些笑话。

在我有的方法中:

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

    }
  },

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

我怎样才能实现这个目标？我尝试了不同的技巧，但所有教程都更改了所有项目的类别，而不是投票的项目。

Answer 1

首先，您需要将笑话传递给该方法。

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

然后你需要为其添加一个v-class。可以使用 v-bind:class，也可以仅使用 :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

编辑更新。让它只影响您点击的笑话，而不是所有被点赞的笑话。您需要笑话的属性，才能知道您是否选择了它。 所以我们可以说

joke.selected

然后...

<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>

然后在你的方法中

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

}

EXAMPLE HERE