VueJs 2

How to force HTML template re-rendering in VueJs?

Jan 11, 2023 5 Mins read

When working on the SPA application, sometimes unexpected cases can happen that require the developer to force the HTML/Template to re-render to make the view reactive with the state data. This tutorial will give you a sample of how to force the template re-rendering in VueJs by random the key place on the HTML template. Vue will re-render specific elements and their child elements where it has the key and the key is changed.

Sample code

You can inspect to see in the elements that when the update random key button is clicked the div element will re-render. When you remove the random key from the div element the element will not refresh. 

<template>
  <div>
    <div :key="randomKey">
      <p>Test</p>
    </div>
    <button @click="updateRandomKey">Update random key</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomKey: Math.random(),
    };
  },
  methods: {
    updateRandomKey() {
      this.randomKey = Math.random();
    },
  },
};
</script>