解决select选择器初始进入时也会触发 change 事件

明天不掉发

已于 2024-07-25 15:12:23 修改

阅读量4k

点赞数

分类专栏： js 文章标签： javascript vue elementui

于 2022-11-09 16:25:56 首次发布

本文链接：https://blog.youkuaiyun.com/gjylalaland/article/details/127772029

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在Vue应用中遇到的问题：页面加载时表单元素的初始值可能触发change事件，导致不必要的操作。提出了两种解决方案：1) 使用变更标志避免在初始化时执行change事件；2) 在初始化函数中修正数据，防止错误更新。这两种方法旨在确保change事件只在用户实际修改选项时触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已修改——

原因：页面初始化时，有些表单元素可能会被赋予初始值，此时就会触发change事件，有可能执行一些错误操作

思路1：运用一个标记决定是否执行change操作

本方法已不推荐！！！请勿使用，待更新其他方法

设置初始为不执行

data() {
  return {
    changeFlag: false
  }
},

在触发的change函数里，通过判断标志，确认是否执行操作

methods: {
  deptChange(val) {
    //标志为true时才执行操作，即 修改选项时才触发change联动
    if (this.changeFlag) {
      console.log('触发change值', val)
      // 修改选项时操作
      this.form.xxx = xxx
    } 
    //初始化，不做任何数据操作，为了下一次的执行，把change标志变为true
    else {           
      this.changeFlag = true;
    }
  }
}

思路2：在初始化函数，例如initForm中，寻找change函数初始化时触发的位置（即赋值语句），将赋值前的正确数据，重新赋给赋值后的错误数据，例如：

this.$set(this,'list', JSON.parse(JSON.stringify(this.form.problemList)));
this.$nextTick(()=>{
    this.list.forEach((item ,index)=>{
        item.isRelevanceContractor = this.form.problemList[index].isRelevanceContractor
    })
});