0

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?

Dionísio Pereira Júnior
  • 1
  • 1
  • I would expect `axios` to be imported before you can use it. Do you see a network call being made (and response returned) in your browser dev tools? Do you not get any errors in your console? Please try and include any debugging details such as console error message or warnings. – yoduh Jul 20 '23 at 19:46
  • The console does not show any errors. Not even when I type something in autocomplete. Not even in the watch section of the script does it arrive. It's behaving like a V-TextField… after typing something and leaving focus, it doesn't show anything, no error in the console. – Dionísio Pereira Júnior Jul 20 '23 at 19:55
  • Can you check your network tab? Does the axios call get made? Is a response returned? – yoduh Jul 20 '23 at 20:15
  • In the tab network no response either! In autocomplete, it doesn't matter what I enter, it doesn't give any errors and doesn't return anything! :( – Dionísio Pereira Júnior Jul 20 '23 at 20:20
  • The handler for the request does not make sense to me (the code in `response.data.forEach`). For example, the iterator variable (`pessoa`) is never used. and each iteration overrides the same variable (`this.itemsAcc`) with the result from filtering what looks like an always empty array (`this.pessoas`). Have a look at that again. If you want support writing the callback, please share what the response data of your request looks like and describe what you want to filter from it. – Moritz Ringler Jul 20 '23 at 20:35
  • There's also no reason for a `setTimeout`. I assume it was copied from the Vuetify example code which was only simulating a fetch call. It's not needed in an actual fetch call. I think this is a case of doing too much at once without understanding or testing the individual pieces, and now that something has gone wrong, it's become very difficult to pin down what/where an error is occurring. – yoduh Jul 20 '23 at 20:47
  • Break the process down into manageable steps and test each step before adding another one. Confirm the watcher runs before adding a method. Confirm the method is called before making an axios call. Verify the axios response before filtering the response. Set `this.itemsAcc` with the filtered response only after everything else has been verified working. – yoduh Jul 20 '23 at 20:48
  • I did an update and put in a new code. Can you help me??? – Dionísio Pereira Júnior Jul 21 '23 at 01:05

1 Answers1

0

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>
Adri
  • 240
  • 2
  • 17