Sometimes Vue’s reactivity system isn’t enough, and you just need to re-render a component. Or maybe you just want to blow away the current and start over. DOM So how do you get Vue to re-render a component the right way? 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. It’s a pretty simple solution, right? You’ll be happy to know that there are lots of others ways to do it: The horrible way: the entire page reloading The terrible way: using the v-if hack The better way: using Vue’s built-in method forceUpdate The best way: on your component key-changing Except here is where I’m going to ruin it for you. . If you need to force a reload or force an update, there’s probably a better way It’s likely that you’re misunderstanding one of the following tricky things: Vue’s reactivity Computed props Watched props (sometimes) Not using a attribute with :key v-for Now, there valid use cases for forcing an update. Most of these will be that’s at the bottom of this article. are solved using the key-changing technique Horrible way: reload the entire page This is one is equivalent to . restarting your computer every time you want to close an app I it would work some of the time, but it’s a pretty bad solution. guess There isn’t really much more to say about this. Don’t do it. Let’s look for a better way. Terrible way: the v-if hack Vue comes with the that will only render the component when it’s true. If it’s false, the component will not exist at all in the DOM. v-if directive Here’s how we set it up for the hack to work. v-if In your you’ll add the directive: template v-if In your you’ll add in this method that uses : script nextTick This is what’s going on here: Initially is set to , so is rendered renderComponent true my-component When we call we immediately set to forceRerender renderComponent false We stop rendering because the directive now evaluates to my-component v-if false On the next tick is set back to renderComponent true Now the directive evaluates to , so we start rendering again v-if true my-component There are two pieces that are important in understanding how this works. First, we have to or we won’t see any changes. wait until the next tick In Vue, a tick is a single DOM update cycle. Vue will collect all updates made in the same tick, and at the end of a tick it will update what is rendered into the DOM based on these updates. If we don’t wait until the next tick, our updates to will just cancel themselves out, and nothing will change. renderComponent Second, when we render the second time. Vue will destroy the first one and create a new one. This means that our new will go through all of its lifecycles as normal — , , and so on. Vue will create an entirely new component my-component created mounted : On a side note, you can use _nextTick_ with promises if you prefer that Still, this isn’t a great solution. I call it a hack because we’re hacking around what Vue wants us to do. So instead, ! let’s do what Vue wants us to do Better way: You can use forceUpdate This is one of the two best ways to solve this problem, both of which are . officially supported by Vue Normally, Vue will react to changes in dependencies by updating the view. However, when you call , you can force that update to occur, even if none of the dependencies has actually changed. forceUpdate Here is where most people make the with this method. biggest mistakes If Vue automatically updates when things change, ? why should we need to force an update The reason is that sometimes Vue’s reactivity system can be confusing, and we that Vue will react to changes to a certain property or variable, but it doesn’t actually. There are also certain cases where . think Vue’s reactivity system won’t detect any changes at all So just like the last methods, if you need this to re-render your component, . there’s probably a better way There are two different ways that you can call , on the component instance itself as well as globally: forceUpdate : This will not update any computed properties you have. Calling will only . Important forceUpdate force the view to re-render The best way: key-changing There are many cases where you will have a legitimate need to re-render a component. To do this the proper way, we will supply a attribute so Vue knows that a specific component is tied to a specific piece of data. If the key stays the same, it won’t change the component, but if the key changes, Vue knows that it should . key get rid of the old component and create a new one Exactly what we need! But first we’ll need to take a detour to understand why we use in Vue. very short key Why do we need to use key in Vue? Once you understand this, it’s a pretty small step to understanding how to force re-renders the proper way. Let’s say you’re rendering a list of components that has one or more of the following: It’s own local state Some sort of , typically in or hooks initialization process created mounted Non-reactive , through jQuery or vanilla APIs DOM manipulation If you sort that list, or update it in any other way, you’ll need to re-render parts of the list. But you won’t want to re-render in the list, just the things that have changed. everything To help Vue keep track of what has changed and what hasn’t, we supply a attribute. , since the index is not tied to specific objects in our list. key Using the index of an array is not helpful here Here is an example list that we have: If we render it out using indexes we will get this: Which displays: Evan - 0Sarah - 1James - 2 If we remove Sarah, we will get: Evan - 0James - 1 The index associated with James is changed, even though James is still James. James will be re-rendered, even if we don’t want him to be. So here , however we end up generating it. we want to use some sort of unique id Before when we removed Sarah from our list, Vue deleted the components for Sarah and James, and then created a new component for James. Now, Vue knows that it can keep the two components for Evan and James, and all it has to do is delete Sarah’s. If we add a person to the list, it also knows that it can keep all of the existing components, and it only has to create a single new component and insert it into the correct place. This is really useful, and helps us a lot when we have . more complex components that have their own state, have initialization logic, or do any sort of DOM manipulation Maybe that detour wasn’t so short. But it was necessary to explain how keys in Vue work. Anyways, let’s get on with the best method of forcing re-renders! Key-changing to force re-renders of a component Finally, here is the (in my opinion) to force Vue to re-render a component. very best way You take this strategy of assigning keys to children, but whenever you want to re-render a component, you just update the key. Here is a very basic way of doing it: Every time that is called, our prop will change. When this happens, Vue will know that it has to destroy the component and create a new one. forceRerender componentKey What you get is a child component that will re-initialize itself and “reset” it’s state. A simple and elegant way to solve our problem! Just remember, if you find yourself needing to force Vue to re-render a component, maybe you aren’t doing something the best way. If, however, you do need to re-render something, choose the method over anything else. key-changing Check out my articles as soon as they come out at michaelnthiessen.com ! I re-post them here a few weeks later. Originally published at michaelnthiessen.com .

Different

Keep

Too Long; Didn't Read

Get free API security automated scan in minutes

The correct way to force Vue to re-render a component

Too Long; Didn't Read

Companies Mentioned

@michaelnthiessen

RELATED STORIES