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

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

CodePudding user response：

changeDate method should not call on initial load as it binds to input and it working as expected. Please find below the snippet and let me know if any clarification required.

new Vue({
        el: '#app',
        data: {
          meeting: {
            due_date: ''
          }
        },
        methods: {
            changeDate: function(date) {
                  console.log(date);
            }
        },
        mounted() {
        }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="date"  v-model="meeting.due_date"
  v-on:input="changeDate(meeting.due_date)">
</div>

CodePudding user response：

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.

CodePudding user response：

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.