Menu
I am new in vue 3. I am trying to use vuetify autocomplete feature for my project. I have consulted official doc of vuetify . Autocomplete Showing [object Object]. Thanks in advance.
<script>
import { Form, Field } from 'vee-validate';
export default {
components: {
Form,
Field,
},
setup(props) {
},
data() {
return {
add: {
id: 1,
},
states: [
{ name: 'Florida', id: 1 },
{ name: 'Georgia', id: 2 },
{ name: 'Nebraska', id: 3 },
{ name: 'California', id: 4 },
{ name: 'New York', id: 5 },
],
};
},
methods: {
},
};
</script>
<template>
<v-row>
<v-autocomplete
v-model="add.id"
:items="states"
item-text="name"
item-value="id"
chips
deletable-chips
filled
></v-autocomplete>
</v-row>
</template>
How to show state name instead of [object object]
376
asked Jul 18 '26 16:07
First of all, you mentioned the wrong reference URL of Vuetify (or maybe you are using the wrong version) because Vuetify 2 is not compatible with Vue 3. So, use Vuetify 3 for your development.
Second, if you don't want to select multiple items (because you didn't use multiple props) then the use of the chips prop doesn't seem worth it. However, if you want to use it, fix two syntax mistakes first-
closable-chips instead of deletable-chips (it is Vuetify 2 syntax.).variant="filled" instead of filled (it is also Vuetify 2 syntax.)Now, the reason autocomplete is showing object object is that you are using item-text which is Vuetify 2 belonging. Instead of that, you should use item-title and the issue will be fixed.
Here is the working demo of output when using item-text and when using item-title-
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card flat>
<v-card-text>
<v-row no-gutters>
<v-col>
<h3 class="my-2">When using "item-text"</h3>
<v-autocomplete
v-model="add.id"
:items="states"
item-text="name"
item-value="id"
variant="filled"
chips
closable-chips
></v-autocomplete>
</v-col>
<v-col class="ms-3">
<h3 class="my-2">When using "item-title"</h3>
<v-autocomplete
v-model="add.id"
:items="states"
item-title="name"
item-value="id"
variant="filled"
chips
closable-chips
></v-autocomplete>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
data() {
return {
add: {
id: 1,
},
states: [
{ name: 'Florida', id: 1 },
{ name: 'Georgia', id: 2 },
{ name: 'Nebraska', id: 3 },
{ name: 'California', id: 4 },
{ name: 'New York', id: 5 },
],
};
},
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>If you're using Vuetify 3, you should use "item-title" instead of "item-text". And i think that Vuetify 2.6 is not compatible with Vue 3.
Give a feedback if this worked for you or not.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
