如何实现点击收藏，图标变色；再次点击，取消收藏，图标变回原来的颜色，且能把已收藏的项发送请求给后端

一、思路和步骤

1.明确需求和效果

2.先需要把所有供选择的选项从后端接口获取到，然后用map数组的方法，把所有未收藏的选项筛选出来，然后在模板中绑定筛选出来的数组，然后用v-for循环遍历展示出来每一项的文字、图片以及收藏图标

3.在模板中写2个img标签,然后分别把变色前的图标和变色后的图标引入，用v-if和v-else控制它是什么情况显示什么图

4.在div盒子上绑定点击事件，点击收藏时，在模板中把那一项传下来，点击函数中形参接收，然后进行判断，若已经是收藏的，把它的isChecked状态字段变为未收藏的，在data中声明一个数组systemIds用来收集已收藏的数组，将点击的每一项用concat进行拼接；若是未收藏的，把它的isChecked状态字段变为已收藏的，将systemIds数组用findIndex方法找到对应点击这一项的下标，然后用splice删除systemIds中那一项。

5.点击下一步，发起请求，把systemIds这个收集已收藏的数组作为入参传过去即可。

二、代码

<template>
      <div class="zll">
        <div class="xtxz">系统选择</div>
        <el-row :gutter="10">
        <el-col class="img_box" 
        v-for="image in imageList" :key="image.id"
        >
        <div @click="checkedFun(image)">
          <div class="hezi">
            <img src="../photosBackground/icon-融资网络.svg" alt="">
          </div>
          <div class="selected">
            <img v-if="image.isChecked == 0" src="../photosBackground/收藏.svg" alt="">
            <img v-else src="../photosBackground/收藏2.svg" alt="">
          </div>
          <div class="wenzi">{{image.name}}</div>
        </div>
        </el-col> 
        </el-row>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
</template>

<script>
// 引入图片素材接口
export default {
  data () {
    return {
      imageList: [], // 素材列表
      systemIds:[], // 收藏数组
    }
  },
  methods: {
    // 发起请求获取所有供选择的选项列表
    hGetReleaseAll(){
        let released = 0
        this.$api("selectReleaseAll",{params:{ id: released }}).then(res => {
            if (res && res.data.state == 'success') {
             this.imageList=res.data.data.map(item => {
               item.isChecked = 0
               return item
             })
            }else{
            }
      })
    },
    // 收藏点击 
    checkedFun (item){
      if(item.isChecked == 0){
        item.isChecked = 1
        this.systemIds = this.systemIds.concat([item.id])
        } else if (item.isChecked == 1) {
          item.isChecked = 0
          let idx = this.systemIds.findIndex(a => a == item.id)
          this.systemIds.splice(idx,1)
          console.log(this.systemIds);
        }
    },
   
   next(){
        let params = {
          userId : JSON.parse(sessionStorage.getItem('user')).id,
          systemIds : this.systemIds
        }
        this.$api("selectdInsert", {params}).then(res => {
          if (res && res.data.success) {
            this.$router.push('/app/normalUser2')
          }
        })
   }
  },
  mounted() {
    this.hGetReleaseAll()
    }
  }
</script>