Dynamic Vue.js Components with the component element

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

[00:00] First, let's create a new x template with an ID of dino show. We'll add a wrapper div, a bolded dino name, and diet. Let's create a new template snippet called dino show. The template attribute will point to our new x template, dino show. We need access to the props name and diet. We'll add dino show to our components block.

[00:24] Let's create a dino show component in the view just to make sure everything's hooked up correctly. We'll set v bind name to item.text and v bind diet to item.diet.

[00:34] Let's add an attribute to our root component called current view and set it to dino edit. Let's move our v bind diet attribute to the dino edit component to make sure that we have all the data we need for both components to operate. Instead of using dino edit component, let's change it to a generic component.

[00:53] We'll bind is to current view. By changing current view, we can change which component is rendered.

[01:01] Let's set up a toggle so the user can switch between show and edit. We'll set up our spans v on click to toggle and display toggle label. We'll need to add a methods block and a toggle function that reads the current view and returns the opposite. Then we can add a computed block with the function toggle label that will return a string of show or edit based on the current view.

[01:25] Right now we have a problem. When we switch views, view is throwing away our data in the components. By wrapping our component in keep alive, we can tell view to keep the components and their data in memory.

Vamshi
Vamshi
~ 6 years ago

Thank you Greg !! Excellent series!!

Phil Anderson
Phil Anderson
~ 3 years ago

Hi Greg - thank you for this series. This is my first Egghead series that I have worked through.

I have created a GitHub repo at https://github.com/philanderson888/vue and followed your lessons through.

In lesson 11 I have worked the lesson through fine but I'm getting two problems on the last lesson here

  1. The keep-alive does not seem to work

  2. I'm getting a Vue warning to avoid mutating the prop 'quantity' directly as it will get overwritten on render.

Are you able to help me at all fix these two problems?

Many thanks

Philip

:)

Here's the repo for this last lesson

https://github.com/philanderson888/vue/blob/master/component-08.html

Phil Anderson
Phil Anderson
~ 3 years ago

PS If you read the README for the repo right through, you will see that I have followed your lessons right through from start to finish.