[Vuejs]-Vuejs: how to update text fields based on autocomplete selection

by

0👍

You should handle the autocomplete change with a listener calling a method which set the text-field v-model value, if the choice is matching a country in the country details array :

<template>
    <div>
        <v-autocomplete @change="handleChange"
                        :items="countries"
                        label="Countries" />
        <v-text-field class="mr-2"
                      v-model="selectedCountryCapital"
                      label="Capital" />
    </div>
</template>

data() {
    return {
        selectedCountryCapital : null
    }
},
methods: {
    handleChange(choice) {
        const matchingCountry = this.countryDetails.find(details => details.country === choice);
        this.selectedCountryCapital = matchingCountry ? matchingCountry.capital : null;
    }
}

Leave a comment