ReRender a child component in Vue

Re-Rendering a child component without rendering the page has always been a hard one for me and I have been a Vue developer for some time now. I always had to re render the page when data changed.

Then this last week it came up! I needed to update a form that was loading within a parent, the form had a user store value and of course when the sessionStorage updated my form wasn't aware, but what I didn't want to do is have the browser reload the page.

So I snapped up my fellow senior developer Jim and asked him if he had ever done it and done it successfully, I kinda feel like I might be late to the party here and teaching some of you to suck eggs but I was shocked after 3 to 4 years as a Vue developer I didn't know how to do this. So I'm hoping many of you will find this useful as well.

Anyway back to my story! Jim mentioned he had done it a few times and how useful it was especially if you are working on hard data driven apps or constant data changes. So off we popped on to Visual Studio code and he taught me how, so I thought I'd blog this out so I can show you all, along with this blog I'll do a screencast and you can find a full code example on my code sandbox (Links below). FYI Jim gets full credit for this one! He is like my Obi Wan!

So here we go let's say we have a parent and child combo and want to only reload the child after some data changes.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/superman.png" width="25%" />
    <comics :key="comics_reload" />
    <hr />
    <button class="btn btn-success" v-on:click="reload()">
      Reload the comics
    </button>
    <hr />
    <h2 class="h4">
      I rendered the table {{ times }} but didnt re-render the page
    </h2>
  </div>
</template>

So as you can see we have some comics loading in as a child element and every-time we hit 'reload comics' we simply want to reload that one portion, now the 'key' to this is exactly that:

<comics :key="comics_reload" />

The bind Key is the main part of this and that will trigger the child reload. So we have a child element and we have a key ready to trigger the reload, so whats next?

Ok so now we need a data point set to zero so if we add

data() {
    return {
      times: 0,
      comics_reload: 0,
    };
  },

We now have our comics_reload key point in the data set to zero. So all thats left if the method that causes the increment on that data point and we are done!

reload() {
      this.comics_reload++;
      this.times = this.times + 1;
    },

Woohooo! thats it right there! comics_reload gets bumped each time we run the method and when that happens the key reloads the component.

3 to 4 years I didn't know how on earth to do that and here we are today, I hope this helped in some way and you can find the full code example here:

https://codesandbox.io/s/vue-reload-child-2ik9n

Also if you fancy it give Jim a follow on twitter! he is a awesome developer and super helpful: https://twitter.com/jimbug1024

Thanks for reading folks.