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

产生原因

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

解决方法

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

  • Vue实例代码
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <el-date-picker
      :value="dateRange"
      type="daterange"
      @change="handleChange"
    ></el-date-picker>
  </div>
</template>
  • 解决方法Js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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方法来解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
    }
  }
};