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>

and

    methods: {
        doSelection: function() {
            console.log(this.startDate);
        },
    },

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:
Created 6 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

4reactions

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() {
   console.log(this.startDate);
   this.$nextTick(() => console.log(this.startDate))
}

1reaction

focussingcommented, Sep 4, 2017

Even more reason to clarify this in the doc 😃

Top 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...

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.

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...

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...

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.