时间戳

首页 > 解决方案 > Vuejs：如何根据自动完成选择更新文本字段

vue.js - Vuejs：如何根据自动完成选择更新文本字段

问题描述

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.jsvue-componentv-autocomplete

解决方案

如果选择与国家详细信息数组中的国家/地区匹配，您应该使用调用设置文本字段 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;
    }
}

推荐阅读