Currently, I am in the process of incorporating a convert() function into my Vue3 project.
Within my functions.js file, I have stored some essential "global" functions.
import axios from 'axios'
let functions = {}
functions.convert = async (amount, currencySetting) => {
const result = await getRate(currencySetting)
const rateData = result.data
const rate = rateData[`EUR_${currencySetting}`]
const converted = rate * amount
return Math.round(converted)
}
function getRate(currency) {
const apiKey = process.env.VUE_APP_CURRENCY_API_KEY
return axios.get(
`https://free.currconv.com/api/v7/convert?q=EUR_${currency}&compact=ultra&apiKey=${apiKey}`
)
}
export default functions
When trying to utilize this function within a component, I am implementing it as follows:
<script>
import functions from '@/functions.js'
export default {
name: 'SltResult',
props: {
data: {
type: Object,
required: true
}
},
computed: {
formattedIrp() {
if (this.data.irp != 'n/a') {
const currencySetting = this.$store.state.currency.currency
if (currencySetting != 'EUR') {
const convertedIrp = functions.convert(this.data.irp, currencySetting)
return convertedIrp + currencySetting
} else {
return this.data.irp + '€'
}
}
return this.data.irp
}
}
}
</script>
Unfortunately, I am encountering issues as the function is returning a pending Promise result. Can anyone provide insight into where I may be going wrong? As a beginner in Vue and JS, any guidance would be greatly appreciated...