this.$set()会改变原数组的值,监听的时候慎用
父组件:
<validDates-form v-if="model.isLimit == 0" :defaultValidDates="model.merchantCarValidDates" :ccfwId="model.ccfwId" :minDate="minDate_1" :maxDate="maxDate_1" @upsateValidDates="upsateValidDates"></validDates-form>
子组件监听:
watch: { defaultValidDates: { deep: true, handler (v, ov) { if (v.length) { // let cur = [...v] this.validDatesform = v.map(item => { // this.$set(item, 'timeInfo', {startTime: item.beginTime, endTime: item.endTime})
使用this.$set()操作数组对象,会导致Vue 无限监听这个值,改变了原始数据了,所以换成下面的处理方式就可以了,不会改变原始数组
[Vue warn]: You may have an infinite update loop in watcher with expression "defaultValidDates"
return Object.assign({}, item, {'timeInfo': {startTime: item.beginTime, endTime: item.endTime}}) }) console.log('监听到的默认值', v) if (this.validDatesform.length > 2) { this.showMore = true } else { this.showMore = false } } else { this.validDatesform = [{ beginTime: '', endTime: '', timeInfo: null }] } } } },