Sometimes, we want to reload a Vue.js component.
In this article, we’ll look at how to reload a Vue.js component.
How to reload a Vue.js component?
To reload a Vue.js component, we can set the key prop to a different value than the original.
For instance, we write
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
},
},
};
</script>
to add the forceRerender method that updates the value of the this.componentKey reactive property.
Once it’s updated, then component-to-re-render component will re-render after calling forceRerender since we set the key prop to componentKey.
Conclusion
To reload a Vue.js component, we can set the key prop to a different value than the original.
