0

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

2019-09-11 提问

查看全部 4 个回答

0

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

图片描述

推荐答案

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不够香吗。点击收藏事件如果没有多余的逻辑,没必要写方法,直接写在模板里就行了。

推广链接