How to search in multiselect primevue and vuejs 3

Question

I want to do a search on multiselect primevue, here I use the filter and function @search="searchStorageLocations" to search. But it didn't work. Please help with solutions and guidance

My hope is to be able to search in multiselect primevue

berikut code saya

 <MultiSelect v-model="datamaster.s_loc" :options="s_locs" optionLabel="s_loc" placeholder="Select storage location" :maxSelectedLabels="3" :class="{ 'p-invalid': submitted && !datamaster.s_loc }" @search="searchStorageLocations" filter />

const searchStorageLocations = async (event) => {
    console.log(event)
    try {
        const response = await fetch(`${apiBaseUrl}/api/sloc/master_storage_location?search=${event.query}&paginate_count=15`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${localStorage.getItem('token')}`
            }
        });
        const data = await response.json();
        if (response.ok) {
            s_locs.value = data.data.data;``
        } else {
            throw new Error(data.error || 'Failed to fetch storage location data from API');
        }
    } catch (error) {
        console.error('Error fetching storage locations:', error);
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to fetch storage locations', life: 5000 });
    }
};

Answer 1

According to primeVue documentation, MultiSelect component does not emit "search" event (see enter link description here) Instead, you may have to use "filter" event