{
key: 'validRangeDate',
title: '有效日期',
type: 'daterange',
start_placeholder: '开始日期',
end_placeholder: '结束日期',
size: 12,
md: 16
}
组件代码如上,使用下方代码给组件默认值时,在页面修改日期内容,会导致组件一直不改变
this.addQueryParamsForm.validRangeDate = [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]
原因如下:
- 当直接设置一个属性(
this.addQueryParamsForm.validRangeDate = newDate
)时,Vue不会触发更新。 - 当修改数组的长度时(
this.addQueryParamsForm.validRangeDate.length = newLength
) - 当在数组或对象上使用索引设置元素(
this.addQueryParamsForm.validRangeDate[0] = newItem
)时,如果该索引之前不存在。
要解决这个问题,可以使用Vue的Vue.set
方法或者this.$set
实例方法来修改属性。这将确保Vue能够追踪到这个变化并更新DOM。以下是修改代码的方法:
this.$set(this.addQueryParamsForm, 'validRangeDate', [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]);
或者
Vue.set(this.addQueryParamsForm, 'validRangeDate', [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]);
注意:
在尝试修改validRangeDate
之前先检查addQueryParamsForm.validStartDate
和addQueryParamsForm.validEndDate
是否为有效日期,否则可能会遇到错误。