Adeiko
Nuxt UI SelectMenu Recursive
I may be doing something wrong for sure but I'm missing where is the recursive update in this component.
When I open the USelectMenu it gives me this error:
[Vue warn]: Unhandled error during execution of app errorHandler
Uncaught Error Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
I think it has to do something with that all originates from a pinia Store (I've had this happen in multiple SelectMenu and always was when their values came from a pinia store, but this may be unrelated)
This is the code of the component simplified.
<script setup lang="ts">
definePageMeta({
layout: 'dash',
})
const LineupStore = useLineupStore()
// This is a pinia Store
const { starters } = storeToRefs(LineupStore)
// starters is defined as Array<iPlayerLineup>
// interface iPlayerLineup extends iPlayer {
// startRate: number
// gameDateType: iGameDateType
// }
// type iGameDateType = 'Intl' | 'TNF' | 'FNF' | 'Sat' | 'Sun Early' | 'Sun Late' | 'SNF' | 'MNF' | 'Unk' | 'Bye'
const timeStatus = computed(() => Array.from(new Set<string>(starters.value.map(player => player.gameDateType))).map(time => ({ value: time, label: time })))
const selectedTimeStatus = ref(timeStatus.value.map(time => time.value))
</script>
<template>
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardToolbar>
<USelectMenu v-model="selectedTimeStatus" :options="timeStatus" multiple value-attribute="value" class="float-right w-36" variant="outline" color="gray">
<template #leading>
<UIcon name="i-material-symbols-alarm-outline" class="size-5" />
</template>
</USelectMenu>
</UDashboardToolbar>
</UDashboardPanel>
</UDashboardPage>
</template>2 replies