How to use ref for multiselect with types and composition-api in Vue 3?

[rezuankassim]

I currently have these codes

import Multiselect from '@vueform/multiselect'
...
setup() {
    const multiselect = ref<Multiselect | null>(null)
                            ^^^^^^^^^^^
// Error: Cannot use namespace 'Multiselect' as type
}

How do go around and do this? Sorry this is my first time using typescript. Thanks in advance.

[EShebunin]

Hi, you can do like this const multiselect = ref<InstanceType<typeof MultiSelect>>(null);

[cnakh]

@EShebunin When I access clear() or other methods it not works

Property 'clear' does not exist on type 'Multiselect'

[rayanazzam1991]

I have same issue please help with this

[xibman]

@rayanazzam1991 simple workaround:

interface CustomMultiselect extends Multiselect{
    close: () => void;
    clear: () => void;
  }

[adamberecz]

Could anyone reliably help me with TS issues to put everything in place once and for all in both Vue 2 & 3? If so, please let me know!

[tienanhbui]

I have same issue. I think it not support defineExpose ref for composition-api in Vue 3

[n14s]

Same issue, and i think @tienanhbui is right. Is there any plan on adding this? Or is there any workaround to access the api methods?

[n14s]

I have found a hacky workaround that works specifically for my use case, but might be adjusted to fit other useCases as well.

I need to access the API method refreshOptions.

As I can't access the method, i replicated the behaviour by rerendering the component.

    <div v-if="isRendered">
      <Multiselect
        v-model="value"
        :placeholder="placeholder"
        :resolve-on-load="true"
        :searchable="true"
        :options="getData"
        class="rs-form rs-multiselect"
        :mode="mode"
        :no-options-text="noOptionsText"
      />
    </div>

const isRendered = ref(true);
const refreshOptions = async () => {
  isRendered.value = false;
  await nextTick();
  isRendered.value = true;
};

Now, whenever I want to refresh the options, I call my custom refreshOptions function. Note, this only works, because I use resolve-on-load="true"

Hope this helps some people. I also hope a proper way for using API methods with vue 3 is added soon.

[adamberecz]

This should be fixed with the upcoming release. If not, feel free to reopen.