I was working on currency switcher. i call method on click the link and after method successful want it to reload. but reload is not working at all. currency getting stored in cookie, if i refresh page manually it gets updated in navbar too, but i want it to reload automatically once method complete.
here is the code in navbar..
<b-dropdown position="is-bottom-left" aria-role="menu">
<template #trigger>
<a class="navbar-item font-bold" role="button">
{{currency}}
<b-icon icon="menu-down"></b-icon>
</a>
</template>
<b-dropdown-item v-for="(item, index) in currencies" :key="index" has-link aria-role="menuitem">
<a class="no-underline" @click="setCurrency(item.iso, (reload = true))"><span class="text-pink-600 font-bold">{{item.fullname}} ({{item.iso}})</span></a>
</b-dropdown-item>
</b-dropdown>
this is method.
methods: {
setCurrency(newcurrency) {
this.$cookies.set(`usercurrency`, newcurrency, {
path: '/',
maxAge: 60 * 60 * 24 * 7
})
// window.location.href = '/'
}
}
I thought to use window.location.href = '/' after setting cookie but i can't do it because i am using the same method in created hook like below code to set currency based on user country and it will say window not defined.
created() {
const isCurrency = this.$cookies.get('usercurrency')
const isUserCountry = this.$cookies.get('usercountry')
if (isCurrency === undefined) {
if (isUserCountry === undefined) {
fetch('https://ipinfo.io/json?token=*********')
.then((response) => response.json())
.then((jsonResponse) => {
const country = jsonResponse.country
this.$cookies.set(`usercountry`, country, {
path: '/',
maxAge: 60 * 60 * 24 * 7,
})
var CurrencyParam
switch (country) {
case 'IN':
case 'NP':
CurrencyParam = 'INR'
break
case 'US':
CurrencyParam = 'USD'
break
case 'AU':
CurrencyParam = 'AUD'
break
case 'CA':
CurrencyParam = 'CAD'
break
case 'GB':
CurrencyParam = 'GBP'
break
case 'AE':
CurrencyParam = 'AED'
break
case 'RU':
CurrencyParam = 'RUB'
break
case 'JP':
CurrencyParam = 'JPY'
break
case 'SG':
CurrencyParam = 'SGD'
break
case 'FR':
case 'FI':
case 'DE':
case 'GR':
case 'HU':
case 'IT':
case 'LT':
case 'MT':
case 'NL':
case 'NO':
case 'PL':
case 'PT':
case 'RO':
case 'RS':
case 'ES':
case 'SE':
case 'CH':
case 'UA':
CurrencyParam = 'EUR'
break
default:
CurrencyParam = 'USD'
}
this.setCurrency(CurrencyParam)
})
.catch((error) => {
console.log(error)
this.setCurrency('USD')
})
}
}
},
Quick solution might be to pass reload as an optional parameter to setCurrency
methods: {
setCurrency(newcurrency, reload) {
this.$cookies.set(`usercurrency`, newcurrency, {
path: '/',
maxAge: 60 * 60 * 24 * 7
})
if (reload) window.location.href = '/'
}
}