Vue-multiselect: Conditionally bind search-change event - how to pass in the search query

[RicLeP]

How can I conditionally bind the search-change event?

Here’s my component:

<multiselect
            v-model="selected"
            :options="options"
            :placeholder="props.placeholder"
            :multiple="props.multiple"
            :loading="isLoading"
            @search-change="props.data ? asyncFind(this.search, this.id) : null"
        >
        </multiselect>

And the key part:

@search-change="props.data ? asyncFind(this.search, this.id) : null"

How can I pass in the search and id? If I use @search-change="props.data ? asyncFind : null" they are undefined.

[shentao]

This is limited by the way event handling in Vue works. You would have to do something like this:

@search-change="asyncFind($event, id)"

$event is always the 1st parameter passed to the event from within Multiselect.
After that change your asyncFind method like this:

asyncFind (query, id) {
  if (!this.props.data) return
  // do the async stuff with the query and id
}

That should solve the problem. Let me know if it doesn’t.