on:selected get previous selected value

Hi, I got some problems when I use the on:selected to passing data to parent component. Here is my code snippet. When I use on:selected to execute the setBeginDate / setEndDate, I will get the previous selected date. Did I do anything wrong?

<template lang="html">
    <div>
          <datepicker v-model="beginDate" v-on:selected="setBeginDate" format="yyyy-MM-dd" input-class="datepicker-input" wrapper-class="datepicker-wrapper" :clear-button='true'></datepicker>
            <datepicker v-model="endDate" v-on:selected="setEndDate" format="yyyy-MM-dd" input-class="datepicker-input" wrapper-class="datepicker-wrapper" :clear-button='true'></datepicker>
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';

export default {
    data() {
        return {
            beginDate: new Date(),
            endDate: new Date(),
        };
    },
    components: {
        datepicker: Datepicker,
    },
    methods: {
        setBeginDate() {
            console.log(this.beginDate); // always get the previous selected beginDate date
            this.$parent.dateListener(this.beginDate);
        },
        setEndDate() {
            console.log(this.endDate); // always get the previous selected endDate date
            this.$parent.dateListener(null, this.endDate);
        }
    }
}
</script>

[JeanBarriere]

I had a similar problem. To fix it, I use watch property to listen on data change. Here you can do:

watch: {
  beginDate: function(val) {
    // do whatever you want with the new value
  },
  ...
}

and it would work for you.

[guptamanish07]

@JeanBarriere Thanks a a lot, it did work. However, do you know what cause the on:selected problem? can you help i am facing the same problem