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

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

1 个答案: