element实现收藏取消收藏

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

在列表数据新增字段

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

点击的时候把index带上

// 星标
        changeStart(index,point){
            let coll = !this.runPoint[index].isCollect
            //  然后更改
            this.$set(this.runPoint[index],'isCollect',coll)
            console.log("point",point)
            console.log("isCollect",coll)
           
        },

最后

以上就是尊敬钻石为你收集整理的element实现收藏取消收藏的全部内容，希望文章能够帮你解决element实现收藏取消收藏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。