Vuejs：如何根据自动完成选择更新文本字段答案

【问题标题】：Vuejs: how to update text fields based on autocomplete selectionVuejs：如何根据自动完成选择更新文本字段
【发布时间】：2021-12-14 05:37:57
【问题描述】：

vuejs 新手。我有一个具有两个数组道具的 vue 组件：国家和国家详细信息

国家 -> ['England', 'Germany']

国家详情 -> [ { country: 'England', capital: 'London' } ]

我可以使用国家/地区数组显示下拉列表。

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

当在 countryDetails 数组（英国）中选择并提供相应的国家/地区时，如何让资本显示在用户可编辑的文本字段中，或者当国家/地区在 countryDetails 数组（德国）中不可用时显示一个空的用户可编辑文本字段

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

【问题讨论】：

标签： vue.js vue-component v-autocomplete

【解决方案1】：

如果选择与国家/地区详细信息数组中的国家/地区匹配，您应该使用侦听器调用设置文本字段 v-model 值的方法来处理自动完成更改：

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

【讨论】：