Instructor: 00:00 To demonstrate dynamic components, I created three functional components, each one just returning an h1 with a different background and text.
00:09 I'm going to make an array of these on my component. I'll call these comps, let's say one, two, and three. Then, I'll have a selected comp, which can be this.comps, and describe the first one.
00:21 I'll use a select drop-down right in here, select, and I'll set up a v-model. That's bound to the selected comp. The options for this will be looping through v-for, where we say comp in comps, we'll make the key the comp.name. The whole label can be the comp.name, as well. Of course, I need the value bound to the comp.
00:49 We have our drop-down with one, two, and three. When I change that, it'll change the selected comp, which makes it easy to use the component, which is a reserved component name in Vue. I can bind is to selected comp.
01:05 From here, it's easy to go one, two, three. Whenever I select a component, my is changes to the selected comp, which can be either this one, that one, or that one, because I'm simply providing this list and a model to my select drop-down, three, two, and one.