This article is also posted on my blog.
While brainstorming some new Vue components (that sounds familiar), I thought it would be nice to loop over a list of items and dynamically render the correct component for each one. The problem is that the components being rendered do not take the same props.
Disclaimer: this article is a bit more complicated than my last one. I assume that you understand the basics of Vue components and that you have some knowledge of modern JS patterns such as Array.map
.
In Vue, it's very common to loop over a list of items and render a component for each item. This is usually done by specifying the component that will be rendered and adding a v-for
to its tag in the template.
<!-- Contacts.vue -->
<template>
<contact-card
v-for="person in people"
:key="person.id"
:contact="person" />
</template>
<script>
import ContactCard from 'ContactCard.vue'
export default {
components: {
ContactCard,
},
props: {
people: {
type: Array,
default: () => [],
}
}
}
</script>
This is a very straightforward pattern seen often in Vue apps. In the example above, we have a component ContactCard
that is meant to display a person's contact information. Let's take a closer look at ContactCard.vue
to get a feel for what's going on.
<!-- ContactCard.vue -->
<template>
<article>
<h1>{{ contact.name }}</h1>
<ul>
<li>Phone: {{ contact.phone }}</li>
<li>Email: {{ contact.email }}</li>
</ul>
</article>
</template>
...
So as you can see, we have a very basic component for displaying details of a contact. The root level is an article tag (yay HTML5) with an h1 tag containing the person's name and an unordered list of some contact information. Nothing crazy, but there is a required prop called contact
.
Dynamic Components
As we build more of the app, we get the idea to add a timeline that shows the order that data was added to the system, which includes creating contacts. Because we already have such a robust component for displaying contact information, we decided to re-use it in this timeline view. Let's take a look at a new component for that.
<!-- Timeline.vue -->
<template>
<contact-card
v-for="item in history"
:key="item.id"
:contact="item" />
</template>
<script>
import { historyArray } from 'Data'
import ContactCard from 'ContactCard.vue'
export default {
components: {
ContactCard,
},
computed: {
history () {
return historyArray
},
},
}
</script>
At first glance, the Timeline
component probably looks great. But let's look at the structure of historyArray
:
[
{
id: 'contact-1',
isContactItem: true,
...
},
{
id: 'event-1',
isSystemEventItem: true,
...
},
{
id: 'contact-2',
isContactItem: true,
...
},
]
A closer look reveals that there are more than just "contacts" in this historical data. Indeed, we have contacts and system events to display. Luckily, someone has already created a SystemEvent
component so we don't have to. Much like our ContactCard
this component has a single required prop (event
in this case) and displays relevant information about that prop. So let's change the Timeline
component to dynamically decide which component to use for each item in the list.
<!-- Timeline.vue -->
<template>
<component
v-for="item in history"
:key="item.id"
:is="item.component"
:contact="item" />
</template>
<script>
import { historyArray } from 'Data'
import ContactCard from 'ContactCard.vue'
import SystemEvent from 'SystemEvent.vue'
export default {
components: {
ContactCard,
SystemEvent,
},
computed: {
history () {
return historyArray.map(historyItem => {
if (historyItem.isContactItem) {
// Return a new object that contains ALL keys
// from `historyItem` and adds a `component` key
return {
...historyItem,
component: ContactCard,
}
} else if (historyItem.isSystemEventItem) {
return {
...historyItem,
component: SystemEvent,
}
}
})
},
},
}
</script>
You can see that instead of specifying contact-card
in the template, we are now using a special tag called component
. Along with this, there is a new is
prop being passed in. Inside of the history
computed value, we are checking each item to see if it is a contact or system event item (using some special helper functions that we assume exist), and we add the key component
that contains the relevant component to render for that particular item. In the loop within the template, the is
prop gets bound to that component
key. The end result is that contact items cause a ContactCard
component to be rendered and system event items cause a SystemEvent
component to be rendered.
Note: you can read up on the component
tag in the Vue docs.
If you're paying close attention, you may notice a slight problem: the SystemEvent
component takes a prop called event
, but the template is currently passing it a prop called contact
. How can we get around that? Well one option is to pass both contact
and event
props to every component. This technically won't cause a problem, but it feels a bit messy. Regardless, let's see what that might look like.
<!-- Timeline.vue -->
<template>
<component
v-for="item in history"
:key="item.id"
:is="item.component"
:contact="item"
:event="item" />
</template>
...
Now every component in the list will be passed contact
and event
. They are both being passed the same variable, so the ContactCard
component will see the contact
prop and behave correctly, and the SystemEvent
component will see the event
prop and behave correctly. This will work fine, but as you can imagine could quickly get out of hand if we have components with numerous props needed. There has to be a better way...
Dynamic Props
Wait a minute! If we are dynamically declaring what component is going to be rendered, can't we dynamically declare what props that component should receive? If you read my last Vue post, then you already know that v-bind
allows you to bind an entire set of props in one go. So let's see if we can apply that here.
Note: You can read more about passing an object's properties with v-bind
in the Vue docs.
<!-- Timeline.vue -->
<template>
<component
v-for="item in history"
:key="item.id"
:is="item.component"
v-bind="item.props" />
</template>
<script>
import { historyArray } from 'Data'
import ContactCard from 'ContactCard.vue'
import SystemEvent from 'SystemEvent.vue'
export default {
components: {
ContactCard,
SystemEvent,
},
computed: {
history () {
return historyArray.map(historyItem => {
if (historyItem.isContactItem) {
// Return a new object that contains a `component`
// key, an `id` key, and a `props` object
return {
id: historyItem.id,
component: ContactCard,
props: {
contact: historyItem,
},
}
} else if (historyItem.isSystemEventItem) {
return {
id: historyItem.id,
component: ContactCard,
props: {
event: historyItem,
},
}
}
})
},
},
}
</script>
Alright, I know the function for our history
computed value is starting to get crazy, but it's really not doing much. If it's hard to follow, here is an example of what the resulting data structure would look like:
[
{
id: 'contact-1',
component: ContactCard,
props: {
contact: {...}
}
},
{
id: 'event-1',
component: SystemEvent,
props: {
event: {...}
}
},
{
id: 'contact-2',
component: ContactCard,
props: {
contact: {...}
}
}
]
Take another look at the template now that you have an idea of how history
is structured. Notice that the contact
and event
props were removed, and we just have a single v-bind
instead. The value we give v-bind
is item.props
, which according to the snippet above, will contain the prop that is appropriate for each component. This is much cleaner than our previous approach, and keeps the template easy to read. If the components differed more, the history
logic could easily be broken into multiple functions.
Summary
Sometimes there is a need to dynamically choose the component to display when looping over a list of items. This is very well supported by VueJS and made easy using the component
tag. As complexity grows and components begin to be re-used throughout an application, these components may have prop interfaces that aren't really compatible with each other. Dynamically binding props to the component, just like dynamically declaring the component to be used, helps keep the template clean and readable.
Top comments (5)
I love the elegance of this solution!
Thank you! As the components start to take more props and the number of different components grows, you can make things even more readable by moving a lot of logic into separate functions. The result is a step-by-step story on how each type of lost item is created, and it's much more readable than other solutions I've tried.
Have you tried implementing this with the Vue3 composition API? I feel like that would make it better for larger use cases.
I haven't, but it may help with that. From what I understand of that API, we would potentially be able to describe the
history
computed value in a more readable fashion. Is that what you're thinking?Yep!