Select element with v-model and v-on="change:onChange" works differently in FF

[gapipro]

Hi,

I noticed that in FF onChange event is triggered before v-model variable is updated.

In all other browsers variable is updated first.

Here is an example: http://jsfiddle.net/aDhEr/

When you select new value in select element, text below will be updated to selected value. But in FF it is equal to last selected value.

[dlh]

This is just a difference in how Firefox processes and stores element attributes compared to Webkit and Blink (I'm not sure what IE does). Run this example in Firefox and Chrome—the order is reversed.

Vue doesn't give the model directive special priority over other directives. You can use $watch() if you want to do something when the value of selected changes.

[yyx990803]

Thanks @dlh for the explanation 👍

[flasher007]

v-on:change="onChange"

[Li-ReDBox]

I know this is very old thread but I am not sure if this browser consistence problem has been solved. I am trying to capture the change of a . In Chrome, with key press, the value of model changes but in Firefox, only mouse can make model changes. Nothing comes out of onChange. $watch does not help. Any suggestions? Update: not much worth doing: https://bugzilla.mozilla.org/show_bug.cgi?id=126379

[sunmer]

@Li-ReDBox
I have it working in both Chrome and Firefox (for Mac).

I did encounter problems when using @change though, so using $watch was the way to go. The way I first tried it was

<select v-model="thing" @change="addThing(thing)"><option v-for="thing in things" v-bind:value="thing" @>{{ thing }}</option></select>

But that called the addThing method before the thing variable was set. Here's the watch that made it work:

watch: { 'thing': function() { //put your addThing code here, as you now have the thing variable set. } },

[thuijzer]

Another hack is to wait for the next tick:

<input type="checkbox" v-model="myModel" @change="myFunction()">

myFunction: function() {
    var context = this;
    Vue.nextTick(function () {
        alert(context.myModel);
    }
}

[Oliboy50]

using a v-model as computed (with setter) works well too
(my use case was something like removing an option just after selecting it):

<template>
  <select v-model="selected">
    <option :value="null"></option>
    <option v-for="option in options">{{ option }}</option>
  </select>
</template>

...

    computed: {
      selected: {
        get () {
          return null;
        },
        set (optionValue) {
          this.options = this.options.filter(o => o !== optionValue);
        },
      },
    },

Spéciale cacedédi à PA Bedu #JoebarRPZ

[Ethan0007]

I just want to ask on how can I add or upload the same file? because when i used @change event it will not uploaded same file also I tried v-on:change.

Thanks!

[maoxiaoke]

I found a way to solve this problem. Maybe you can try:

<input type="checkbox" v-model="myModel" @change="myFunction()">

myFunction: function() {
    let context = this
    setTimeout(() => {
      // some code
    }, 0)
}

[Oliboy50]

@maoxiaoke FYI, this answer is more "vuejs compliant"

[frizar]

@Oliboy50 nextTick is called when the DOM changed, if i am correct. this is ok to use nextTick over setTimeout? or this is ok only for this case?