Vue-select: [feature request] add tag attribute to v-select component and on-change callback

[JeOam]

while trying to use v-select in a for in loop, there is no way i can distinguish which $index emited the on-change callback.

[JeOam]

btw, I think the :on-change callback should be called after deselect all item in ; especially after clear all search words that needs to pull a data list from no key words condition.

[sagalbot]

Both very good suggestions. I'll work on this for an upcoming release.

Did you have an API in mind for distinguishing v-selects?

[JeOam]

@sagalbot May be this way? :

<v-select on-change="consoleCallback" :options="countries" :tag="index"></v-select>

methods: {
  consoleCallback(val, tag) {
    console.dir(JSON.stringify(val))
  }
}

[ReneMoraales]

I reaaaally need this. Any news or suggestions?

[sagalbot]

@ReneMoraales, what if the on-change callback and input event were passed the vm instance as an argument?

[ReneMoraales]

@sagalbot I assume that would do the trick. Basically what I'm trying to do is, within an array of models, each one with their respective vue-select, to remove the current selection when the user starts typing to search. I am not entirely sure how I would trace that back to a particular item in my array of values, to be honest.

[jsanchezs]

+1

[angeloPereyra]

hello. can someone help me? this feature is already a thing right? i'm getting this error

i followed what the documentation said. note that i'm not using vuex

<vue-select multiple on-change="consoleCallback" :options="variants" label="name"> </vue-select>

methods: {
    addItem(){
    },
    fetchData() {
        this.$http.get('/admin/pos-data').then(function(variants) {
            this.variants = variants.body;
            this.tempVariants = variants.body;
        });
    },
    consoleCallback(val) {
        console.dir(JSON.stringify(val))
    },
    alertCallback(val) {
        alert(JSON.stringify(val))
    }
    }

edit: i thought the feature being discussed is the on-change attribute. i might be at the wrong thread sorry

[sagalbot]

@angeloPereyra I think there's a typo in the docs, but all you need to do is add a colon to bind the callback:

:on-change="consoleCallback"

[simevo]

Drawing from the key attribute in Vue 2 lists, what about this API:

<ul>
  <li v-for="country in countries" v-bind:key="country.id">
    <v-select on-change="consoleCallback" :options="countries"></v-select>
  </li>
</ul>
...
methods: {
  consoleCallback(val, key) {
    console.dir('country[' + key + ']=' + JSON.stringify(val))
  }
}

Also this discussion of event binding in knockout (a similar framework) is worth reading.

[hawkeye64]

I like the suggestion to pass in an index. At the same time, the select could be assigned a "ref" using combination of the of the options name plus the index.

In this way, the select could be access via Vue using this.$refs.countries-1, etc and you could attach blur events, etc. very helpful when there are multiple vSelect statements on the same page.

[simevo]

Here is a way around this one; for our model:

{ feeds: [{id:1, tags:['a']}, {id:2, tags:['a', 'b']}] }

the markup is:

<div v-for="f in feeds" v-bind:key="f.id">
  <v-select
    :on-change="function(val) { tagsChanged(f.id, val); }"
    multiple
    :options="['a', 'b', 'c']"
    value='f.tags'></v-select>
</div>

This supplies an anonymous function with the signature required by onChange, which passes the new value val and the id from the model to a separate tagsChanged function

Don't forget to define a global tagsChanged function or one inside the Vue app it it has to access the model.

[stepanorda]

@simevo you are my saviour. I was already thinking on switching back to chosen until found your comment with this hack :)

[sagalbot]

Thanks @simevo! Added this to the docs https://vue-select.org/guide/loops.html.