CODEWITHSUNDEEP
vue.js
Ajmal-Hossain
Ajmal-Hossain

Reputation: 215

vuejs datepicker selected event is no working properly

I'am vuejs-datepicker . I'm trying to print the selected date which is stored in a variable in data. Initially the value of the variable is empty. vuejs-datepicker supports the selected event. so when the event is triggering, I mean if date is selected the selected event get triggered. but does not print ta current selected date rather it print empty string. if I again select another date the it prints the previous date. It is printing the the previous stored date. code is given below

Uses

 <date-picker :bootstrap-styling="true" class="datepicker form-control" 
 placeholder="Select Date" v-model="appointment.appointmet_date" 
 @selected="dateSelected()"></date-picker>

dateSelected method

dateSelected () {
   console.log(this.appointment.appointmet_date)         
},

data property

data () {
    return {
        appointment: {
            appointmet_date: '',
        }
    }
}

enter image description here

When I entered first date it printed null. when I entered date second time it printed the time entered first time

upadate

  dateSelected () {
      // console.log(this.appointment.appointmet_date)
      var self = this
      this.$nextTick(() => console.log(self.appointment.appointmet_date))
      this.$http.post(apiDomain + 'api/getAvailableDate', {avlDate: self.appointment.appointmet_date})
            .then(response => {
                console.log(response)
            })

    }

Upvotes: 3

Views: 8506

Answers (2)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

when i entered first date it printed null. when i entered date second time it printed the time entered first time

Yes because the selected event is fired before the Vue nextTick function which updates the v-model.

Please below code and working codesandbox demo.

dateSelected (e) {
  console.log(this.appointment.appointmet_date);
  this.$nextTick(() => console.log(this.appointment.appointmet_date))
},

Upvotes: 1

Philip YW
Philip YW

Reputation: 290

For future visitors - simply make the post request within the Vue nextTick() like so:

dateSelected () {
  ...
  this.$nextTick(() => {/* post call here */})
}

Upvotes: 1

Related Questions