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

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

阅读 207
评论 2019-09-11 提问
    4 个回答

    创建一个空数组变量,点击的时候判断一下数组里有没有当前点击的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不够香吗。点击收藏事件如果没有多余的逻辑,没必要写方法,直接写在模板里就行了。

    评论 赞赏 2019-09-11
      Mando
      • 166

      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>

      方法不知道你怎么传的呢

      评论 赞赏 2019-09-11

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

        评论 赞赏 2019-09-11

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

          图片描述

          评论 赞赏 2019-09-11
            撰写回答

            登录后参与交流、获取后续更新提醒