SelectMenu ignoring initial object values

[ThePlay3r]

Environment

---

• Operating System: Linux
• Node Version: v20.14.0
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.7.1
• Builder: -
• User Config: runtimeConfig, extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, nitro, i18n, compatibilityDate
• Runtime Modules: @nuxt/eslint@0.5.0, @nuxt/fonts@0.7.1, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.0, @nuxtjs/i18n@8.5.0

• Build Modules: -

Version

Pro 1.4.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-u6tm1b?file=app.vue

Description

When using a v-model prop with some initial object values (such as fetched already selected data from backend), the <USelectMenu> component doesn't show these as selected and seems to ignore them completely.

Even when selecting the same objects again, it just seems to add them to the array and disregard anything, that was there previously.

Additional context

The behaviour changes when setting the by prop. In my case, I set it to id, after which I can see the object as selected, but only in the dropdown. This also allows me to edit the data as normal. (Select/Deselect) However the button itself still shows 0 selected.

Logs

No response

[NasrALdaya]

It seems like the same problem as issue 2028

[rdjanuar]

I suggest using by when your v-model is an object or an array of objects. This is because this component currently doesn't work when comparing objectA === objectB.