Vue-select: on-change called when there is no change..

[FrancescoMussi]

The on-change event is called as soon as the component load..
Even before the mounted() method.
Is that normal or am I making something wrong?

Is there a way to stop this initial firing of the event?

This is my code:

data() {
  return {
    options: [{label: 'Italian', value: 'it'},{label: 'English', value: 'en'}, ],
    selected: {},
  }
},
mounted() {
    let appLanguage = this.$localStorage.get('appLanguage');

    if (appLanguage === null ) {
        this.selected = this.options[0];
    } else {
        if (appLanguage == 'it') {
            this.selected = this.options[0];
        } else if (appLanguage == 'en') {
            this.selected = this.options[1];
        }
    }    
},
methods: {
  selectLang(){
    this.$emit('changeLang', this.selected.value);      
    this.$localStorage.set('appLanguage', this.selected.value);     
  },
}

<v-select :options="options" class="langSelect" v-model="selected" :on-change="selectLang()">
  <template slot="selected-option" scope="option">
    <img :src='"../assets/img/" + option.value.toLowerCase() + ".png"' class="flag"/> 
  </template>
  <template slot="option" scope="option">
    <img :src='"../assets/img/" + option.value.toLowerCase() + ".png"' class="flag"/> 
   </template>
</v-select>

[thaisonle]

I got the same problem. Here's a code pen example. As you can see, on load, the on-change callback is triggered.

[FrancescoMussi]

@thaisonle Thanks for the clear example!

It shouldn't fire the initial onChange event right?
Since there was no change in the select...

[thaisonle]

@FrancescoMussi right, I wouldn't expect the onChange event to be thrown on initial load. I'm assuming it's seeing a "change" from undefined or null to whatever the model value is.

[jmpmcmanus]

I had the same problem. I was using it with v-model="syncedVal". When I removed v-model on-change did not execute when loading the page. However, I still want to use v-model, so is there a way to turn it of when loading ?

[sagalbot]

The onChange prop is defined as such:

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

this.$emit('input', val) is what wires up v-model to do it's magic, so it needs to be called on that initial load from null to whatever is selected. I've been thinking about deprecating onChange as the input event is essentially a duplicate and the events are a better syntax.

I think the best solution is just to add more events. Separate select & deselect events would probably solve most peoples use cases, and they'd be implemented so that on 'first tick', they aren't triggered.

[nahuelhds]

I'm having this issue right now. Is there any solution on this?

[nahuelhds]

I've just seen this one https://github.com/sagalbot/vue-select/issues/442

So I leave this just for anyone to see:

<v-select @input="doStuff"></v-select>

[davek1979]

Where is this standing?
There needs to be a clear distinction between changing the value through a model and changing it manually by user.
I need to execute logic specifically when the user triggers it rather than the sync with store.

[nahuelhds]

Read my previous comment. I don't know how they'll solve this, but in the meantime using @input works fine

[davek1979]

Well no, it does not in my case. My select needs a value set by default, so I can use either :value or v-model. If @input is hooked up, it gets called immediately. I wish I didn't have to set the value but I have to and the callback is triggered immediately.

[davek1979]

OK I solved it by simply adding this.$emit('afterselect', {}) into onAfterSelect function definition and listening to afterselect event. Done. Doing what I needed.
Whoever wants to tinker with this further, it might be worth looking here for some inspiration on the event model. I dislike Kendo completely but their events are in 90% what one needs.

[nahuelhds]

Make a PR! @davek1979

[asologor]

Have the same problem. It's awful. I change v-model data and input event is being triggered. Right after page loaded.

[markas-kvitka]

@sagalbot I think that this is caused because of watch on mutatedValue. onChange is not triggered only when new value equals old. So I suggest adding initialValue prop and assigning it to mutatedValue in data.

[sagalbot]

711 solved this and has been merged. Will be fixed in the next release, which looks like it will be a bump to 3.0 instead of 2.6.

If you need the fix right now, you can npm install git+https://[email protected]/sagalbot/vue-select.git.

[sagalbot]

onChange is removed in v3. Use @input.

https://vue-select.org/guide/upgrading.html#events-instead-of-callbacks

[bluebitconsulting]

I used @input instead of :input and my problem was solved