Отображение автозаполнения Vuetify [объект объект]
Я новичок в vue 3. Я пытаюсь использовать функцию автозаполнения vuetify для своего проекта. Я проконсультировался с официальным документом vuetify. Автозаполнение Отображение [объект Объект]. Заранее спасибо.
<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>
Как показать имя состояния вместо [объект объекта]
Ответы 4
используйте :items = "states.map(x=> x.name)" вам нужно использовать массив строк.
Если вы используете Vuetify 3, вы должны использовать «item-title» вместо «item-text». И я думаю, что Vuetify 2.6 несовместим с Vue 3.
Дайте отзыв, если это сработало для вас или нет.
Добавьте return-object в v-autocomplete
<v-autocomplete
v-model = "add.id"
:items = "states"
item-text = "name"
item-value = "id"
chips
deletable-chips
filled
return-object
></v-autocomplete>
Прежде всего, вы упомянули неправильный URL-адрес Vuetify (или, возможно, вы используете неправильную версию), потому что Vuetify 2 несовместим с Vue 3. Итак, используйте Vuetify 3 для своей разработки.
Во-вторых, если вы не хотите выбирать несколько элементов (потому что вы не использовали multiple реквизит), то использование chips реквизита не стоит того. Однако, если вы хотите его использовать, сначала исправьте две синтаксические ошибки:
- Используйте
closable-chipsвместоdeletable-chips(это синтаксис Vuetify 2). - Используйте
variant = "filled"вместоfilled(это также синтаксис Vuetify 2).
Теперь причина, по которой автозаполнение показывает object object, заключается в том, что вы используете item-text, принадлежащий Vuetify 2. Вместо этого вы должны использовать item-title, и проблема будет исправлена.
Вот рабочая демонстрация вывода при использовании item-text и при использовании 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>
Прежде всего, какую версию Vuetify вы установили? 2.6 предназначен только для Vue 2, вы должны следовать этому руководству для Vue 3: next.vuetifyjs.com/en/getting-started/installation