Vue-select: v-model value isn't updated by the component if you're also using the on-change event listener

[stoked74]

The v-model value isn't updated by the component if you're also using the on-change event listener. Has the event been deprecated? Using @input works as expected. Are the docs incorrect? Here's my component declaration.

[Emirii]

Hello, I also ran into the same problem. It is very misleading.

I did see this in the code above the on-change listener function:
An optional callback function that is called each time the selected value(s) change. When integrating with Vuex, use this callback to trigger an action, rather than using :value.sync to retrieve the selected value.
I'm not using Vuex, but :on-change definitely eats the changed value event, rather than passing it to v-model or :value.sync as well.

With :on-change:

 <v-select
  v-model="category"
  :value.sync="category"
  :on-change="getCategoryChanges"
  :options="categories"
  placeholder="Search Categories..."
 ></v-select>

Data:

data() {
    return {
        categories: [{id: 1, label: 'Fruit'}, {id: 2, label: 'Dairy'}],
        category: {id: 2, label: 'Dairy'}
    }
}

When you change the value from Dairy to Fruit in the dropdown, the category variable is not updated with:on-change present.

I tried something I thought was "crafty" but it actually crashed my browser as I think I caused some sort of infinite loop. (it wasn't pretty) 😨

methods: {
  getCategoryChanges: function(category) {
    this.category = category;
    //other stuff
  },
}

I just had to get around the whole thing by making a new variable just for the input value... and updating my model with the getCategoryChanges function.

<v-select
    v-model="categoryValue"
     :on-change="getCategoryChanges"
    :debounce="500"
    :on-search="getCategoryOptions"
    :options="categories"
    placeholder="Search Categories..."
>

created() {
  this.categoryValue = this.category;
}



md5-f7c84b48399eb31dbcd9727722198c28



getCategoryChanges: function(categoryValue) {
  this.category = categoryValue;
  //other junk
}

Is this a bug or intended functionality?

[stoked74]

I believe I worked around this issue by using v-model for the data value and listening to the @input event for changes. The docs are not current and I'm not even sure the on-change event is valid anymore.

[sagalbot]

My apologies for the out of date documentation! I've started refactoring them to use GitBook because there was just way too much overhead in the current setup. I know that's causing frustration so I'll get that out as soon as I can.

To answer your question, the default implementation of the onChange prop is as follows:

onChange: {
    type: Function,
    default: function (val) {
       this.$emit('input', val)
    }
}

this.$emit('input', val) is what allows you to use the v-model syntax. If you overwrite the onChange callback, it will essentially disable v-model. As @stoked74 mentioned, the better way is to hook into the input event.

[rowild]

@sagalbot I really think this must be in the documentation somewhere. This would be a tremendous help for many, I assume!