Vue.js：如何根据autocomplete选中项更新对应文本字段内容

解决方案 #

你原来的写法存在两个核心问题：

• 直接绑定Props属性违反单向数据流规则，Props不允许在子组件内直接修改
• 选中不在countryDetails里的国家时，不存在对应索引的对象，会触发undefined访问报错

你可以按以下步骤调整实现需求：

1. 先在组件data选项中新增变量存储文本框输入值

data() {
  return {
    category: '', // 原有下拉选中值变量保留
    capitalInput: '' // 新增变量，用于绑定首都文本框
  }
}

2. 新增watch监听下拉选中值的变化，自动匹配首都赋值

watch: {
  category(newSelectedCountry) {
    // 从countryDetails中查找对应国家的详情
    const targetCountry = this.countryDetails.find(item => item.country === newSelectedCountry)
    // 匹配成功赋值对应首都，匹配失败设为空
    this.capitalInput = targetCountry ? targetCountry.capital : ''
  }
}

3. 修改文本框的绑定逻辑

<v-text-field
    class="mr-2"
    v-model="capitalInput"
    label="Capital" 
/>

后续需要提交数据时，直接取category（选中国家）和capitalInput（首都值）组合成需要的格式即可，不需要修改传入的Props。

内容的提问来源于stack exchange，提问作者user2352834