Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v-model is not updated in "selected" event handler

See original GitHub issue

<datepicker v-model="startDate" :monday-first="true" input-class="input" placeholder="Selecteer..." v-on:selected="doSelection()"></datepicker>


    methods: {
        doSelection: function() {

variable startDate is empty at the first date selection. Second time date is selected (for example different date) the firstly clicked date is shown on the console

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

charliekasselcommented, Aug 31, 2017

I believe this is because the selected event is fired before the Vue nextTick function which updates the v-model. I’m sure if you do this, the second logging will have the value you expect:

doSelection: function() {
   this.$nextTick(() => console.log(this.startDate))
focussingcommented, Sep 4, 2017

Even more reason to clarify this in the doc 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Vue select component not updating selected option ...
Save this question. Show activity on this post. I'm trying to wrap a select in a Vue custom component using the v-model pattern...
Read more >
Adding a new todo form: Vue events, methods, and models
As mentioned earlier, v-model syncing works by updating the variable using events. For text inputs, this sync happens using the input event.
Read more >
Form Input Bindings - Vue.js
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct...
Read more >
ASP.NET Core Blazor data binding - Microsoft Learn
The text box is updated in the UI only when the component is rendered, not in response to changing the field's or property's...
Read more >
Vue-Multiselect | Vue Select Library
div label.typo__label Single select multiselect( v-model="value", ... react to the search query changes, set a handler function on the @search-change event.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found