Vue.js实现货币转换器：选中选项与输入框值绑定问题

核心问题分析 #

你的代码存在几个关键问题导致无法正确绑定选中的货币与对应值：

• 两个输入框都绑定到同一个currencyValue数组，会导致输入值互相覆盖，不符合双向转换的需求。
• 下拉选择框未通过v-model绑定到数据属性，无法追踪用户选中的货币类型。
• 将汇率对象拆分为currencyName和currencyValue两个数组，破坏了货币代码与汇率的对应关系，难以通过选中的货币快速获取其汇率。

修正后的代码实现 #

以下是重构后的完整代码，解决了上述问题并实现基础的双向货币转换功能：

<template>
  <div class="mx-auto flex flex-col justify-center items-center h-screen">
    <h1 class="text-3xl font-bold underline">Currency Converter</h1>
    
    <div class="inline-block py-5">
      <input 
        v-model.number="fromValue" 
        class="bg-gray-400" 
        type="number"
        @input="convertCurrency"
      >
      <select 
        v-model="fromCurrency" 
        @change="convertCurrency"
      >
        <option 
          v-for="(rate, currency) in listItems" 
          :key="currency"
          :value="currency"
        >
          {{ currency }}
        </option>
      </select>
    </div>

    =

    <div class="inline-block py-5">
      <input 
        v-model.number="toValue" 
        class="bg-gray-400" 
        type="number"
        @input="reverseConvertCurrency"
      >
      <select 
        v-model="toCurrency" 
        @change="convertCurrency"
      >
        <option 
          v-for="(rate, currency) in listItems" 
          :key="currency"
          :value="currency"
        >
          {{ currency }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listItems: {}, // 存储完整的汇率对象（货币代码: 汇率）
      fromCurrency: 'EUR', // 默认源货币
      fromValue: 1, // 默认源金额
      toCurrency: 'USD', // 默认目标货币
      toValue: 0 // 默认目标金额
    }
  },
  methods: {
    async getData() {
      const res = await fetch("https://api.exchangerate.host/latest");
      const finalRes = await res.json();
      this.listItems = finalRes.rates;
      // 初始化转换结果
      this.convertCurrency();
    },
    // 从源货币转换到目标货币
    convertCurrency() {
      if (!this.listItems[this.fromCurrency] || !this.listItems[this.toCurrency]) return;
      // 计算逻辑：(源金额 / 源货币汇率) * 目标货币汇率
      const baseAmount = this.fromValue / this.listItems[this.fromCurrency];
      this.toValue = (baseAmount * this.listItems[this.toCurrency]).toFixed(4);
    },
    // 反向转换（从目标货币到源货币）
    reverseConvertCurrency() {
      if (!this.listItems[this.fromCurrency] || !this.listItems[this.toCurrency]) return;
      const baseAmount = this.toValue / this.listItems[this.toCurrency];
      this.fromValue = (baseAmount * this.listItems[this.fromCurrency]).toFixed(4);
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

关键改进说明 #

• 数据结构优化：保留完整的listItems汇率对象，直接通过货币代码访问对应汇率，避免数组拆分导致的对应关系丢失。
• 双向绑定完善：为每个转换面板分别设置fromCurrency、fromValue、toCurrency、toValue属性，实现独立的数据绑定。
• 转换逻辑实现：添加convertCurrency和reverseConvertCurrency方法，根据选中的货币和输入金额实时计算转换结果，支持双向转换。
• 事件监听：通过@input和@change事件监听输入值或选中货币的变化，自动触发转换计算。

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