v-select Object Issue Fix
User
onMounted(async()=>{
categories.value = await fetchPortfolioCategories() as any;
categories.value = await fetchPortfolioCategories() as any;
console.log(categories.value)
})
showing object object
Assistant
You're seeing `[object Object]` in your “ because by default, Vuetify tries to render the item as a string, and it doesn't know how to display an object. To fix this, you need to tell Vuetify which **property** of the object to use for the label and the value.
Assuming your `categories` array looks like this:
[
{ id: 1, name: 'Design' },
{ id: 2, name: 'Development' },
...
]Then update your “ like this:
<v-select
v-model="selectedCategory"
:items="categories"
item-title="name"
item-value="id"
label="Category"
required
></v-select>### Explanation:
– `item-title="name"` – tells Vuetify to display the `name` property of each item in the dropdown.
– `item-value="id"` – tells Vuetify to use the `id` property as the selected value bound to `v-model`.
Let me know if your category object structure is different, and I can adjust the code for you.