Pass additional variable to fetchOptions

[msslgomez]

Hi, is there a way for me to pass another variable to the fetchOptions method? I want to make it dynamic using a v-for and pass the url from where to get the options to the method. I tried this but now I can't get the search value.

<t-rich-select :fetch-options="fetchOptions(q, 'test')" placeholder="Search for a repository" value-attribute="value"
    text-attribute="label" multiple :close-on-select="false" :minimum-input-length="3" class="max-w-sm mx-auto" v-model="test">
  <template slot="option" slot-scope="{ className, option, query }">
    <div :class="className">
      <div class="flex w-full ml-2 text-gray-800">{{ option.raw.label }}</div>
    </div>
  </template>
</t-rich-select>

//method
fetchOptions(q, val) {
  return fetch(`/filters/sale_points?search=${q}`)
    .then((response) => response.json())
    .then((data) => ({ results: data }));
    },

Doing it this way it shows q as undefined.

In an ideal world I would do something like this, (values would be the url in this case)

<div v-for="(values, relation) in $page.props.relations" class="px-4 py-2" :key="relation">
  <t-input-group :label="relation | label">
    <t-rich-select :value="filtersForm.relations[relation]" @input="updateValue(relation, $event)" multiple :close-on-select="false" placeholder="Select" :fetch-options="fetchOptions(q, values)" value-attribute="value" text-attribute="label" />
  </t-input-group>
</div>

//method
fetchOptions(q, val) {
  return fetch(`${val}?search=${q}`)
    .then((response) => response.json())
    .then((data) => ({ results: data }));
    },

Is there a way to do this?

[razukc]

You can call your method inside the default method provided by the Rich Select.

<t-rich-select
:fetch-options="(q, nextPage) => fetchOptions(q, nextPage, pass, as, many, variables, as, you, like, here)"
//other options
/>

[msslgomez]

@razukc Works great! Do you know how I can change the "Please enter 1 or more characters" similar to the other slots, like the noResults slot? I don't see this one in the docs.

Edit: Found it, I don't know if it can be done with a <template slot=""></template> or not but I did it by adding the prop minimum-input-length-text="text here" to the component.