Vuetify paparan autolengkap

Question

Saya baru menggunakan vue 3. Saya cuba menggunakan ciri autolengkap vuetify dalam projek saya. Saya merujuk kepada dokumentasi rasmi vuetify. Autolengkap menunjukkan [objek objek]. Terima kasih terlebih dahulu.

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

Cara untuk memaparkan nama status dan bukannya [objek objek]

Answer 1

Tambah return-object

dalam v-autolengkap

<v-autocomplete
    v-model="add.id"
    :items="states"
    item-text="name"
    item-value="id"
    chips
    deletable-chips
    filled
    return-object
></v-autocomplete>

Answer 2

Jika anda menggunakan Vuetify 3, anda harus menggunakan "item-title" dan bukannya "item-text". Dan saya rasa Vuetify 2.6 tidak serasi dengan Vue 3.

Jika ini berguna kepada anda, sila berikan maklum balas.