收藏功能循环判断点击的是哪一个

Question

我现在就是点击的时候所有的都会变色，我想要做的就是只改变点击的那一个的颜色。在不改变我这个写法的时候，我该怎么做？

Answer 1

创建一个空数组变量，点击的时候判断一下数组里有没有当前点击的id，有则删除，无则push，然后在图标的class里判断是否包含当前的id.

更新：

<el-col :span="3">
  <span class="text-gray text-14 cursor-pointer" @click="item.isCollection = !item.isCollection">
    <i class="iconfont el-icon-star-on" id="icon" :class="{'text-primary':item.isCollection}"></i>
    <span class="ml-2" id="text" :class="{'text-black':item.isCollection}">收藏</span>
  </span>
</el-col>

既然你每一项都有isCollection属性来作为标识，那就直接判断，事件都不需要。你拿content作为循环数据还在循环体里用content[index]干啥的，item不够香吗。点击收藏事件如果没有多余的逻辑，没必要写方法，直接写在模板里就行了。

Answer 2

isCollection 应该是数组吧

isCollection:[true,false,true]

<div v-for="(item,index) in data" key="index">
  <el-col>
    <span @click="collection(index)">
      <i :class="{'text-primary':isCollection[index]}"></i>
      <span :class="{'text-black':isCollection[index]}"></span>
    </span>
  </el-col>
</div>

方法不知道你怎么传的呢

Answer 3

实在不行你就写两个一样的，颜色不一样而已，v-if判断

Answer 4

html
content这个是我用来循环的数组，isCollection这个就保存在这个数组里面

<el-col :span="3">
  <span class="text-gray text-14 cursor-pointer" @click="collection(item.id, index)">
    <i class="iconfont el-icon-star-on" id="icon" :class="{'text-primary':content[index].isCollection}"></i>
    <span class="ml-2" id="text" :class="{'text-black':content[index].isCollection}">收藏</span>
  </span>
</el-col>

这是方法

collection(id, index) {
  this.content[index].isCollection = !this.content[index].isCollection;
}