我是新来的。我试图使用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>
如何显示状态名而不是[object object]
在v-autocomplete中添加return-object
<v-autocomplete
v-model="add.id"
:items="states"
item-text="name"
item-value="id"
chips
deletable-chips
filled
return-object
></v-autocomplete>
如果你使用的是Vuetify 3，你应该使用"item-title"而不是"item-text"。而且我认为Vue 2.6和Vue 3不兼容。
给出反馈，如果这对你有效或不。
使用:items="states.map(x=> x.name)"，您需要使用字符串数组。
首先，您提到了Vuetify的错误引用URL(或者您使用了错误的版本)，因为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/font@4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/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/vuetify@3.0.5/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>