I need to refresh the current page when a user clicks the refresh button. I'm using Vuetify to generate the button.
<v-btn fab dark>
<v-icon dark>refresh</v-icon>
</v-btn>
I know in place of the router I can specify <v-btn fab dark to="myDesiredPath"
but I need to refresh whatever route the user is currently on.
I know in vanilla js I can use location.reload(), but I don't know how to feed that to the button on the user's click.
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
What you need is vm-forceUpdate. Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content.
Approach 1: One can auto refresh the webpage using the meta tag within the head element of your HTML using the http-equiv property. It is an inbuilt property with HTML 5. One can further add the time period of the refresh using the content attribute within the Meta tag.
you can just create a method in Vue that runs the vanilla JS and then run that method @click
of the v-btn.
methods: {
reloadPage(){
window.location.reload()
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With