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:
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.
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>
