Vue-multiselect: [Question] How to get the event sender or have extra argument in @select

[masoudmemariani]

Hi,

I have 3 multiselects in my vue. I am going to filter out the data in my page based on the values selected in these 3 multiselects. To avoid code redundency I would like to have one function that filters the data. Is there a way to get a reference to the sender multiselect or at least have another argument in the function for @select? Something like this maybe?:

<multiselect @select="filter('selector1', selectedValue)">
<multiselect @select="filter('selector2', selectedValue)">

Thank you in advance!

[shentao]

Hey!

There is a prop called id. https://monterail.github.io/vue-multiselect/#sub-props
Once you pass it, all events will be called with the id as the second argument. For example @select will be emitted with (selectedElement, id).

This should solve the problem! :)

[masoudmemariani]

Thank you! Yes it solves the problem. Just for anyone having the same question, here's how the tag looks like:

<multiselect id="filter1" @select="filter">

and in your js you just need to declare the arguments like this:

methods: { filter(selectedValue, id) {...} }

id will be "filter1".

[shentao]

Happy to hear that! :)

[calbear47]

Just as a follow up to @masoudmemariani, make sure to actually use the id prop if you need it to be an interpolated value....Like:
<multiselect :id="guest.guest_id" @select="filter">

This also works this @input, as you might expect.