Vue datetime v-on:input being triggered on initial load

Question

I have a datetime picker below. When the component is mounted initially, the changeDate method is being fired.

I've removed any other reference to this method so it's definitely being caused by the code below.

Does anyone know what's going on here? There is no user input so this shouldn't be getting triggered.

Can the v-model attribute not be used together with v-on:input?

<datetime
  ref="datimepicker"
  v-model="meeting.due_date"
  v-on:input="changeDate(meeting.due_date)"
/>

I've replicated the issue here - https://codepen.io/s89_/pen/QWOrzbv

Answer 1

On further inspection, this seems to be an actual issue with the package which appears is no longer maintained - https://github.com/mariomka/vue-datetime/issues/272

I suppose a possible way around this is just to place a watcher on the v-model value and emit the changeDate event from there.

Answer 2

You can see in the source code that for Datetime.vue

created () {
    this.emitInput()
},

It calls emitInput

emitInput () {
    let datetime = this.datetime ? this.datetime.setZone(this.valueZone) : null
    if (datetime && this.type === 'date') {
        datetime = startOfDay(datetime)
    }
    this.$emit('input', datetime ? datetime.toISO() : '')
},

If you want to get around this, I would check that the passed in value from the event doesn't equal to what meeting.due_date currently is.

You could do something like this.