我需要一个按钮来使用vue.js更改货币

Question

这是我第一次问这里，所以为我的错误道歉。

使用vue我得到一个Json

[ { } "price_usd": 110000, "price_uyu": 4786100, } ]

我有这个：

<div class="col-5">
<span id="valueUSD"> USD {{car_actual.price_usd}} </span>
</div>

当我点击一个按钮时，我需要更改这个：

<span id="valorUSD"> USD {{car_actual.price_usd}} </span>

为此：

<span id="valueUYU"> UYU {{car_actual.price_uyu}} </span>

如果我再次点击，我需要换回来。

如果你需要进一步的信息，请告诉我。

谢谢。

Answer 1

这可能是我处理的方式

<template>
<button v-for="currency in supportedCurrencies" :key="currency" :click="selectCurrency(currency)">{{ currency }}</button>
<span v-for="car in carData" :id=`valor${selectedCurrency}`> {{ selectedCurrency }} {{ getCarPrice(car) }} </span>
</template>
<script>
export default {
data () {
return {
carData: [
{ "price_usd": 110000, "price_uyu": 4786100 }, // each object is a car
...
],
selectedCurrency: 'USD',
supportedCurrencies: ['USD', 'UYU']
}
},
methods: {
selectCurrency (currency) {
this.selectedCurrency = currency
},
getCarPrice (car) {
switch (this.selectedCurrency) {
case 'USD':
return car.price_usd
case 'UYU':
return car.price_uyu
default:
return 'No Pricing Available in ' + this.selectedCurrency
}
}
}
}
</script>

需要注意的一点是，您可能可以改进getCarPrice以与supportedCurrencies进行扩展，而不需要在添加新货币时更新代码的两个不同部分。

此外，selectedCurrency是硬编码的，因此，如果您计划使用动态默认值(也许每个用户都可以用自己的货币看到它(，那么请考虑将所有内容移动到子组件中，并在从服务器检索到默认货币后将其作为道具传入。

除此之外，如果你只计划支持两种货币，这可能就足够了。