nuxt
Unable to use `value-attribute` on `InputMenu` with `async search`
Environment
- Operating System: Darwin
- Node Version: v21.5.0
- Nuxt Version: -
- CLI Version: 3.11.1
- Nitro Version: -
- Package Manager: unknown
- Builder: -
- User Config: -
- Runtime Modules: -
- Build Modules: -
Version
v2.13.0
Reproduction
Don't have yet
Description
While using InputMenu with async search, I have following response data. When I provide the value-attribute and select one of the option, I get the selected value but the component can no longer display the selected label.
On the case of not providing the value-attribute, the component will return the selected object, which is correct.
[
{
"label":"LONSDALE ST",
"value":"LONSDALE|ST"
},
{
"label":"ALEXENDER ST",
"value":"ALEXENDER|ST"
}
]
Additional context
No response
Logs
No response
Happens to me as well. The following code is the async-search example with the value-attribute="phone" option being set:
<template>
<div>
<UInputMenu
v-model="selected"
:search="search"
:loading="loading"
placeholder="Search for a user..."
option-attribute="name"
value-attribute="phone"
trailing
by="id"
/>
</div>
</template>
<script setup lang="ts">
const loading = ref(false);
const selected = ref();
async function search(q: string) {
loading.value = true;
const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } });
loading.value = false;
return users;
}
</script>
@anbraten This should have been fixed in https://github.com/nuxt/ui/commit/4d5f2509022e4fb74fc268d5479f7cc8f0415040 already but not released yet. You can use the Edge channel for now: https://ui.nuxt.com/getting-started/installation#edge
