AliveSeven Blog

前言：Element-UI 使用了时间组件，后台获取数据赋值后无法改变，@change事件也无法触发，进入组件前，从后台获取时间数据，想把这个时间赋值给时间组件绑定的变量上面去，发现赋值之后没有反应，并且

产生原因

主要原因应该是Vue2无法检测到数组和对象的某些变动，例如直接通过索引设置一个元素或者改变对象的属性。
并且Element时间组件绑定的变量也是数组，所以，当我们想要在组件内部修改父组件传递过来的数据时，需要使用 Vue.set() 或者 this.$set() 方法来触发响应式更新。
而@change时间无法触发的原因，可能是由于使用了双向绑定或者直接改变了父组件传递给时间日期范围组件的值，导致组件内部的数据已经和外部的值不同步了。

解决方法

Vue.set()或者this.$set()

Vue实例代码

html 复制代码

<template>
  <div>
    <el-date-picker
      :value="dateRange"
      type="daterange"
      @change="handleChange"
    ></el-date-picker>
  </div>
</template>

解决方法Js代码

javascript 复制代码

export default {
  data() {
    return {
      dateRange: []
    };
  },
  mounted() {
    // 向后台获取数据并赋值给dateRange
    this.dateRange = [new Date("2023-06-01"), new Date("2023-06-03")];
  },
  methods: {
    handleChange(value) {
      // 修改 dateRange 数组中的元素，并触发响应式更新
      Vue.set(this.dateRange, 0, value[0]);
      Vue.set(this.dateRange, 1, value[1]);
    }
  }
};

使用中间变量和Watch方法来解决

javascript 复制代码

export default {
  data() {
    return {
      tempDateRange: [],
      dateRange: []
    };
  },
  mounted() {
    // 向后台获取数据并赋值给tempDateRange
    this.tempDateRange = [new Date("2023-06-01"), new Date("2023-06-03")];
  },
  methods: {
    handleChange(value) {
      this.tempDateRange = value;
    }
  },
  watch: {
    tempDateRange(newVal) {
      this.dateRange = newVal;
    }
  }
};

AliveSeven

一个有趣的博客

文章

标签

分类

AliveSevenの博客

Element-UI的时间日期范围组件BUG

产生原因

解决方法

Vue.set()或者this.$set()

使用中间变量和Watch方法来解决