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 }] } } } },

 

posted @ 2022-04-20 17:51  front-gl  阅读(154)  评论(0编辑  收藏  举报