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")
                })
        }
    }
}

CodePudding user response：

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 = '/'
    }
}