Utilizing this particular component allows for the seamless transfer of currency, price, and fruit information to each FruitPrices component:
<template>
<div>
<!-- By default, USD is selected. Any changes in options will automatically update prices -->
<select v-model="currency">
<option
v-for="(currencyOption, index) in currencies"
:key="index"
:value="currencyOption"
>
{{ currencyOption.name }}
</option>
</select>
<div v-for="(fruit, fruitIndex) in fruitsWithPrices" :key="fruitIndex">
<FruitPrices :name="fruit.name" :convertedPrice="fruit.convertedPrice" />
</div>
</div>
</template>
<script>
import FruitPrices from '../somePlace/FruitPrices'
export default {
name: "FruitPricesContainer",
components: { FruitPrices },
data: () => ({
fruits: [
{
name: 'Apple',
price: 0.2
},
{
name: 'Banana',
price: 0.3
},
{
name: 'Orange',
price: 0.25
}
],
currency: {
exchangeRate: 1,
name: 'USD'
},
currencies: [
{
exchangeRate: 1,
name: 'USD'
},
{
exchangeRate: 1.2,
name: 'EUR'
},
{
exchangeRate: 0.7,
name: 'SGD'
},
{
exchangeRate: 700,
name: 'MXN'
},
{
exchangeRate: 3700,
name: 'COP'
}
]
}),
computed: {
fruitsWithPrices() {
return this.fruits.map((fruit) => {
return {
...fruit,
convertedPrice: fruit.price * this.currency.exchangeRate
}
})
}
}
}
</script>
To complete the process, let's create the FruitPrices component:
<template>
<div>
<p>{{ name }}: {{ convertedPrice }}</p>
</div>
</template>
<script>
export default {
name: "FruitPrices",
props: {
name: {
type: String,
required: true
},
convertedPrice: {
type: Number,
required: true
}
}
}
</script>
The setup is complete! (Note: Not tested, please report any errors or issues).