问题描述

做项目的过程中使用el-select组件又踩到了一个坑，就是多选的时候触发remove-tag事件也会触发change事件，因为是两个事件处理函数，所以就会导致change事件处理函数里的逻辑又会被执行一次~~

于是赶紧写了个demo：

<template>
  <div>
    <el-select multiple v-model="selectValue" @change="handleChange" @remove-tag="handleRemove">
      <el-option v-for="(item, index) in list" :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: [],
      list: [
        {
          label: "111",
          value: 1
        },
        {
          label: "222",
          value: 2,
        }
      ]
    }
  },
  methods: {
    handleChange() {
      console.log("change...")
    },
    handleRemove() {
      console.log("remove...")
    }
  }
}
</script>

全部勾选然后对其进行删除就会发现会触发change事件并且优先于remove-tag事件。

解决方法

在handleChange事件使用this.$nextTick方法将处理逻辑推迟下一个事件循环中，这样change事件就会在remove-tag事件之后触发。

handleChange() {
      this.$nextTick(() => {
        console.log("change...")
      })
 },

那么接下来再只用一个变量来进行区分即可。

<script>
export default {
  data() {
    return {
      selectValue: [],
      removeFlag:false,
      list: [
        {
          label: "111",
          value: 1
        },
        {
          label: "222",
          value: 2,
        }
      ]
    }
  },
  methods: {
    handleChange() {
      this.removeFlag = false;
      this.$nextTick(() => {
        if (!this.removeFlag) {
          console.log("change...")
        }
      })
    },
    handleRemove() {
      this.removeFlag = true;
      console.log("remove...")
    }
  }
}
</script>

这不扣波6吗？