Nuxt UI Pro : Custom component Maximum recursive updates exceeded
Hello
I created a CommonsSelectMenu component that uses USelectMenu to avoid repeating code, but when I use it I get the error "Maximum recursive updates exceeded.", the error message is displayed locally but in production it freezes my app when I click on it.
This is the content of my component :
The component is used this way :
Script :
Template :
I created a CommonsSelectMenu component that uses USelectMenu to avoid repeating code, but when I use it I get the error "Maximum recursive updates exceeded.", the error message is displayed locally but in production it freezes my app when I click on it.
This is the content of my component :
<script setup lang="ts">
interface Props {
endpoint: string
placeholder?: string
searchable_attributes?: string | string[]
}
const {
endpoint,
placeholder,
searchable_attributes = 'name'
} = defineProps<Props>()
const { get } = useApi(endpoint)
const loading = ref(false)
const selected = ref([])
const emit = defineEmits(['update:modelValue'])
const search = async (q: string) => {
if (loading.value) return
loading.value = true
const items: any[] = await get(null, { q })
loading.value = false
return 'data' in items ? items.data : items
}
</script>
<template>
<USelectMenu
v-model="selected"
class="w-32"
:loading
:searchable="search"
searchable-placeholder="Rechercher..."
:placeholder="placeholder ?? 'Sélectionner'"
:option-attribute="searchable_attributes"
multiple
trailing
by="id"
:searchable-lazy="true"
@change="emit('update:modelValue', selected)"
>
<template #label>
<span
v-if="selected.length"
class="truncate"
>
{{ placeholder }}: {{ selected.length }}
</span>
</template>
</USelectMenu>
</template><script setup lang="ts">
interface Props {
endpoint: string
placeholder?: string
searchable_attributes?: string | string[]
}
const {
endpoint,
placeholder,
searchable_attributes = 'name'
} = defineProps<Props>()
const { get } = useApi(endpoint)
const loading = ref(false)
const selected = ref([])
const emit = defineEmits(['update:modelValue'])
const search = async (q: string) => {
if (loading.value) return
loading.value = true
const items: any[] = await get(null, { q })
loading.value = false
return 'data' in items ? items.data : items
}
</script>
<template>
<USelectMenu
v-model="selected"
class="w-32"
:loading
:searchable="search"
searchable-placeholder="Rechercher..."
:placeholder="placeholder ?? 'Sélectionner'"
:option-attribute="searchable_attributes"
multiple
trailing
by="id"
:searchable-lazy="true"
@change="emit('update:modelValue', selected)"
>
<template #label>
<span
v-if="selected.length"
class="truncate"
>
{{ placeholder }}: {{ selected.length }}
</span>
</template>
</USelectMenu>
</template>The component is used this way :
Script :
const filters = computed(() => ({
levels: levels.value.map(level => level.name).join(',')
}))
const debouncedFilters = useDebounce(filters, 300)
const { data } = await useAsyncData(
'lessons',
() =>
get(null, {
...(debouncedFilters.value.levels && { level: debouncedFilters.value.levels })
}),
{
watch: [debouncedFilters]
}
)const filters = computed(() => ({
levels: levels.value.map(level => level.name).join(',')
}))
const debouncedFilters = useDebounce(filters, 300)
const { data } = await useAsyncData(
'lessons',
() =>
get(null, {
...(debouncedFilters.value.levels && { level: debouncedFilters.value.levels })
}),
{
watch: [debouncedFilters]
}
)Template :
<CommonsSelectMenu @update:model-value="levels = $event" endpoint="levels" placeholder="Niveaux" /><CommonsSelectMenu @update:model-value="levels = $event" endpoint="levels" placeholder="Niveaux" />
