[绍棠] vue 监听两个时间插件都变化后执行

1.

                           <DatePicker  id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"placeholder="选择日期"></DatePicker><!-- <input class="timeInput" type="text" id="startTime"> --><span>—</span><DatePicker v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"placeholder="选择日期" id="endTime"></DatePicker>

methods: {getTaxDate: function (date) {this.startTime = date},getTaxEndDate: function (date) {this.endTime = date}
}

 data () {return {id: 'echartsBarType',id2: 'echartsPieType',option: {},option2: {},startTime: '',endTime: ''}},

watch:{startTime() {if (this.startTime) {console.log('开始时间',this.startTime)} else {this.actTaxDate = '';}}
}

二：

同时监听两个输入框，如果两个都有值才执行一些方法

用computed

        computed: {timeChange() {const { startTime, endTime } = thisreturn {startTime,endTime}}},

        watch: {timeChange: {handler: function(val) {console.log('address change: ', val)},deep: true}},

 判断两个时间都有

watch: {timeChange: {handler: function(val) {if(val.startTime!=''&&val.endTime!=''){if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){console.log('address change1: ',val)}}},deep: true}},

 加判断，结束时间必须大于开始时间（数据双向绑定）

getTaxDate: function (date) {if(date>this.endTime&&this.endTime!=''){this.startTime = ''alert('开始时间不能大于结束时间');}else{this.startTime = date}},getTaxEndDate: function (date) {if(date<this.startTime){alert('结束时间必须大于开始时间');this.endTime = ''}else{this.endTime = date}},

<DatePicker  v-model="startTime" id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"placeholder="选择日期"></DatePicker><span>—</span><DatePicker v-model="endTime"  v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"placeholder="选择日期" id="endTime"></DatePicker>

 完整代码如下：

export default {name: 'incomeTotal',data () {return {id: 'echartsBarType',id2: 'echartsPieType',option: {},option2: {},startTime: '',endTime: ''}},components: {IncomeHeader,Echarts},mounted () {this.getAjax()},computed: {timeChange() {const { startTime, endTime } = thisreturn {startTime,endTime}}},watch: {timeChange: {handler: function(val) {if(val.startTime!=''&&val.endTime!=''){if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){console.log('address change1: ',val)}}},deep: true}},methods: {getTaxDate: function (date) {if(date>this.endTime&&this.endTime!=''){this.startTime = ''alert('开始时间不能大于结束时间');}else{this.startTime = date}},getTaxEndDate: function (date) {if(date<this.startTime){alert('结束时间必须大于开始时间');this.endTime = ''}else{this.endTime = date}},