vue点击元素变背景色及字体颜色再次点击变回($event)

需求

点击部门后弹出一个框，点击确认后让选中的背景颜色和字体颜色改变，再次点击恢复之前状态

思路

基本思路：
① 获取到当前点击的元素，对其背景颜色和字体进行修改，再次点击时，修改成之前的颜色
② 定义一个class，编写好样式，获取dom元素之后，加上类名，再次点击移除类名

具体逻辑如下：

	changeItem(event, curr) {
	  if (event.target.parentNode.style.backgroundColor == '' || event.target.parentNode.style.backgroundColor == 'rgb(255, 255, 255)') {
	    this.isClick = true
	    this.currDec = curr
	    this.currDom = event
	  } else if (event.target.parentNode.style.backgroundColor == 'rgb(88, 136, 226)') {
	    this.isClick = false
	    event.target.parentNode.style.backgroundColor = 'rgb(255, 255, 255)' || ''
	    event.target.style.color = "#000"
	    let currIndex = null
	    for (let i = 0; i < this.selectedList.length; i++) {
	      if (this.selectedList[i].name === curr.name) {
	        currIndex = i
	      }
	    }
	    console.log('要删除的索引', currIndex);
	    this.selectedList.splice(currIndex, 1)
	  }
	  if (event.target.parentNode.style.backgroundColor == 'red') return this.isClick = false
	},
	clickPF() {
	  this.selectedList.push({ ...this.currDec, instruction: this.intro })
	  this.currDom.target.parentNode.style.backgroundColor = "rgb(88, 136, 226)"
	  this.currDom.target.style.color = "#fff"
	  this.isClick = false
	  this.intro = ''
	}

出现的问题：当点击两条数据中间的区域，可以拿到某条数据，颜色打印出来也是改变后的，但是页面就是没有发生变化，导致当再次点击这条数据时，已选择的数据变量里面会有重复的选项

注意点：event.currentTarget获取的是绑定事件的元素对象； event.target获取的是触发事件的元素对象
说明：在这里使用的van-cell组件，解析出来是：<div><div></div></div>，绑定事件呢是在最外层的div上(也就是下图的②)，如果用户点击的是①，此时它的parentNode就是②，也就是绑定事件的元素；那么用户触发的是②，它的parentNode就是③(判断数组长度大于0时显示里面数据)，这个时候修改已经不符合需求了

完整代码

<template>
  <div>
    <div class="content">
      <van-collapse :lazy-render="false" v-model="activeNames">
        <van-collapse-item
          :title="item.name"
          :name="item.name"
          v-for="(item, index) in paifaList"
          :key="index"
        >
          <div v-if="item.children.length > 0">
            <van-cell
              class="bgc"
              v-for="(e, i) in item.children"
              :key="i"
              @click="changeItem($event, e)"
              >{{ e.name }}</van-cell
            >
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-popup v-model="isClick" style="border-radius: 5px">
      <textarea
        class="reject"
        v-model="intro"
        placeholder="请输入派发工单的执行要求(选填)"
      />
      <van-button type="info" block @click="clickPF">确认</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
  	// 这里是为了做数据回显
    selectedList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      activeNames: [],
      isClick: false, // 控制是否选择
      intro: '', // 执行要求
      currDec: null, // 当前点击的派发部门的数据
      currDom: '', // 当前点击的event
      isOK: false, // 控制执行要求弹层
    }
  },
  methods: {
    changeItem(event, curr) {
      if (event.currentTarget.style.backgroundColor == '' || event.currentTarget.style.backgroundColor == 'rgb(255, 255, 255)') {
        this.isClick = true
        this.currDec = curr
        this.currDom = event.currentTarget
      } else if (event.currentTarget.style.backgroundColor == 'rgb(88, 136, 226)') {
        this.isClick = false
        event.currentTarget.style.backgroundColor = 'rgb(255, 255, 255)' || ''
        // 直接修改color不生效，组件里面的div有样式，优先是按照里面的样式展示
        event.currentTarget.childNodes[0].style.color = "#000"
        let currIndex = null
        for (let i = 0; i < this.selectedList.length; i++) {
          if (this.selectedList[i].name === curr.name) {
            currIndex = i
          }
        }
        console.log('要删除的索引', currIndex)
        this.selectedList.splice(currIndex, 1)
      }
      if (event.currentTarget.style.backgroundColor == 'red') return this.isClick = false
    },
    clickPF() {
      this.currDom.style.backgroundColor = "rgb(88, 136, 226)"
      this.currDom.childNodes[0].style.color = "#fff"
      this.selectedList.push({ ...this.currDec, instruction: this.intro })
      this.isClick = false
      this.intro = ''
    },
  }
}
</script>