Vuetify-Anzeige für die automatische Vervollständigung

Question

Ich bin neu bei Vue 3. Ich versuche, die Funktion zur automatischen Vervollständigung von vuetify in meinem Projekt zu verwenden. Ich habe die offizielle Dokumentation von vuetify konsultiert. Autovervollständigung zeigt [Objektobjekt]. Dank im Voraus.

<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>

So zeigen Sie den Statusnamen anstelle von [Objektobjekt] an

Answer 1

在 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>

Answer 2

如果您使用的是 Vuetify 3，则应使用“item-title”而不是“item-text”。 而且我认为 Vuetify 2.6 与 Vue 3 不兼容。

如果这对您有用，请提供反馈。