element实现收藏取消收藏

87 阅读 0 评论 58 点赞

我是靠谱客的博主尊敬钻石，这篇文章主要介绍element实现收藏取消收藏，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<el-col :span="6" v-for="(item,index) in runPoint"  :key="item.id" class="mb15">
                <el-card shadow="always">
                  <div class="rowlist" >
                      <div>
                        <span :title="item.point" class="pointleft">{{item.point}}</span>
                        <i class="fr " v-bind:class="item.isCollect ? 'el-icon-star-on importicon':'el-icon-star-off'" @click.stop="changeStart(index,item.point)"></i>
                        关键
                      </div>
                    </div>
                </el-card>
              </el-col>

在列表数据新增字段

复制代码

1
2
3
4
5
let _this=this
                        response.data.result.runPoint.forEach(item => {
                            _this.$set(item, 'isCollect', false)
                        })

点击的时候把index带上

复制代码

1
2
3
4
5
6
7
8
9
10
// 星标
        changeStart(index,point){
            let coll = !this.runPoint[index].isCollect
            //  然后更改
            this.$set(this.runPoint[index],'isCollect',coll)
            console.log("point",point)
            console.log("isCollect",coll)
           
        },