Vuetify Autocomplete with Axios Query not working - VueJS

Question

Vuetify Autocomplete with Axios Query not working - VueJS

I'm using V-Autocomplete from Vuetify 3 to show a list of people's names.

My files are like this:

My app.js

import './bootstrap';

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

const vuetify = createVuetify({
    components,
    directives,
})

const myCustomLightTheme = {
    dark: false,
    colors: {
        background: '#CCCCCC',
        surface: '#FFFFFF',
        primary: '#6200EE',
        'primary-darken-1': '#3700B3',
        secondary: '#03DAC6',
        'secondary-darken-1': '#018786',
        error: '#B00020',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
    },
}

export default createVuetify({
    theme: {
        defaultTheme: 'myCustomLightTheme',
        themes: {
            myCustomLightTheme,
        },
    },
})

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(vuetify)
            .mount(el)
    },
})

My Component.vue

<script setup>
import {Head, useForm} from '@inertiajs/vue3';
import { Link } from '@inertiajs/vue3';

const props = defineProps(['curso','form','submit']);

</script>

<template>
    <v-container>
        <v-form @submit.prevent="submit">
            <v-row>
                <v-col cols="6">
                    <v-autocomplete
                        v-model="selectAcc"
                        v-model:search="searchAcc"
                        :loading="loadingAcc"
                        :items="itemsAcc"
                        menu-icon=""
                        density="compact"
                        variant="outlined"
                        hide-no-data
                        hide-details
                        label="Coordenador do Curso"
                    ></v-autocomplete>
                </v-col>
            </v-row>
        </v-form>
    </v-container>
</template>
<script>
export default {
    data () {
        return {
            loadingAcc: false,
            itemsAcc: [],
            searchAcc: null,
            selectAcc: null,
            pessoas: [],
        }
    },
    watch: {
        searchAcc(val) {
            val && val !== this.selectAcc && this.querySelections(val)
        },
    },
    methods: {
        querySelections (p) {
            this.loadingAcc = true
            this.pessoas = [];
            setTimeout(() => {
                axios.get('/api/search',{params: {nome: p}}).then(response => {
                    response.data.forEach((pessoa)=>{
                        this.itemsAcc = this.pessoas.filter(e => {
                            return (e || '').toLowerCase().indexOf((p || '').toLowerCase()) > -1
                        })
                    })
                })
                this.loading = false
            }, 500)
        },
    },
}
</script>

But, Autocomplete is not performing the search. It's not even getting values. Can someone show me where I'm going wrong. I'm starting on VueJs.

UPDATING

I made some changes and was able to search the database. It is returning to me a Json object containing two attributes: id and name What I want to do is that the name attribute is shown in the list and when selected, it assigns the id attribute to the v-autocomplete value. Can you help me to do this? My new code is like this:

My Component Vue

<template>
    <v-autocomplete                                                                    
        v-model="selectAcc"
        v-model:search="searchAcc"
        :loading="loadingAcc"
        label="Coordenador do Curso"
        menu-icon=""
        :items="itemsAcc"
        item-value="itemsAcc.id"
        item-text="itemsAcc.value"
        hide-no-data
        hide-details
        variant="outlined"
        density="compact">
    </v-autocomplete>
</template>
<script>
export default {
    data () {
        loadingAcc: false,
        itemsAcc: [],
        searchAcc: null,
        selectAcc: null,
    },
    watch: {
        searchAcc (val) {
            val && val !== this.selectAcc && this.querySelections(val)
        },
    },
    methods: {
        querySelections (v) {
            this.loadingAcc = true
            this.itemsAcc = [];

            axios.get('/api/search',{params: {nome: v}}).then(response => {
                response.data.forEach((pessoa)=>{
                    this.itemsAcc.push(pessoa);

                    //this.itemsAcc = this.pessoas;
                })
            })
            this.loadingAcc = false
        },
    },
}
</script>

In autocomplete this list appears This image

In console, appears This image

What should I do to make the name attribute appear in the list?

Answer 1

I think the problem comes from your item-text and item-value, try it this way:

<v-autocomplete                                                                    
    v-model="selectAcc"
    v-model:search="searchAcc"
    :loading="loadingAcc"
    label="Coordenador do Curso"
    menu-icon=""
    :items="itemsAcc"
    item-value="id"
    item-text="value"
    hide-no-data
    hide-details
    variant="outlined"
    density="compact">
</v-autocomplete>

Answer 2

if you are using Vuetify 3 you should use item-title instead of item-text

Answer 3

Yes, you should to use item-title instead item-text. Also you can combine it with return-object prop and call back functions

:item-title="(item)=>(${item.name} - ${item.id})"