Vuejs: how to update text fields based on autocomplete selection

Question

New to vuejs. I have a vue component that has two array props: countries and countryDetails

countries -> ['England', 'Germany']

countryDetails -> [ { country: 'England', capital: 'London' } ]

I’m able to display a dropdown using countries array.

<v-autocomplete
    v-model="category"
    :items="countries"
    label="Countries" />

How do I get the capital to show up in a user editable text field when corresponding country selected and available in countryDetails array (England) or show an empty user editable text field when country not available in countryDetails array (Germany)

<v-text-field
    class="mr-2"
    v-model="countryDetails[i].capital"
    label="Capital" />

Answer 1

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