0

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

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

1

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>

方法不知道你怎么传的呢

0

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

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

图片描述

撰写答案

推广链接