0

I want to get the selected value from Vuetify's VAutocomplete to use in a function. How can I get this attribute?

I have in my application a V-AutoComplete from Vuetify. It's all working. What I want is that when I select the option in the V-Autocomplete search, I can capture the value to use in a function that I'm doing.

My Component.Vue

<script setup>
import { Head } from '@inertiajs/vue3';
import Layout from '../Layout/Layout.vue';
import { Link } from '@inertiajs/vue3';

const props = defineProps({
    colecaoPessoa: String,
});

</script>

<template>
    <v-row>
        <v-col cols="6">
             <v-autocomplete
                 name="coordenador_pessoa_id"
                 v-model="selectAcc"
                 v-model:search="searchAcc"
                 :loading="loadingAcc"
                 label="Coordenador do Curso"
                 menu-icon=""
                 :items="itemsAcc"
                 item-value="id"
                 item-title="nome"
                 hide-details
                 variant="outlined"
                 density="compact"
             ></v-autocomplete>
         </v-col>
    </v-row>
</template>

<script>
export default {
    data () {
        return {
            loadingAcc: false,
            itemsAcc: [],
            searchAcc: null,
            selectAcc: null,
            pessoas: this.colecaoPessoa,
        }
    },
    watch: {
        searchAcc (val) {
            val && val !== this.selectAcc && this.querySelections(val)
        },
    },
    methods: {
        functionAddIdtoSelector() {
            //Here is my function that will receive the selected item-value. It must be activated when the user selects the option in the V-Autocomplete list
        },
        querySelections (v) {
            this.loadingAcc = true
            
                this.itemsAcc = JSON.parse(this.pessoas).filter(e => {
                    return (e.nome || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
                })
                this.loadingAcc = false
            
        },
    },
}
</script>

Can someone help me?

Dionísio Pereira Júnior
  • 1
  • 1

1 Answers1

0

The selected value is in the v-model="selectAcc"

use console.log in this part of your code to test the selected object

    watch: {
        searchAcc (val) {
            val && val !== this.selectAcc && this.querySelections(val)
            console.log(this.selectACC)
        },
    },
Mohammad
  • 90
  • 7