Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

118
Views
vue js datepicker v-model updates with previously set value when setting a new date

In the template, the endDate updates as expected. But when calling the filtersChangerd method using @selected attribute, the updated value is not the new value but the previously set one.

<template>
  <div>  
     <datepicker placeholder="Select end date" v-model="endDate" @selected="filtersChanged"/>
      <p>endDate Filter: {{ endDate }}</p>       
  </div>
</template>

<script>
import {bus} from "./../../main"
import Datepicker from 'vuejs-datepicker';

export default {
    data () {
      return {
          endDate: new Date('December 1, 2022 03:24:00')
        }
    },
    methods: {
      filtersChanged() {
        console.log("Filter endDate", this.endDate)
        bus.$emit('filtersChanged', 
        {
           placeFilter: d => d.place === this.selectedPlaceFilter, 
           startDate: d => d.time >= this.startDate, 
           endDate: d => d.time <= this.endDate, 
        })
      },
      calculateStartDate() {
        var myDate = new Date();
        var newDate = new Date(myDate.getTime() - (60*60*24*7*1000));
        return newDate
      }
    },
    components: {
      Datepicker
  }
}
</script>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Yea thats because 'selected' event is fired before the Vue 'nextTick' function that sets the v-model variable. SO manually call it in your function.

filtersChanged() {
    this.$nextTick(() => {
        console.log("Filter endDate", this.endDate)
        bus.$emit('filtersChanged', 
        {
            placeFilter: d => d.place === this.selectedPlaceFilter, 
            startDate: d => d.time >= this.startDate, 
            endDate: d => d.time <= this.endDate, 
        });
    }  
}

Reference

https://codesandbox.io/s/vuejs-datepicker-selected-event-v9ikz?file=/components/Demo.vue:611-628

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!