Loop through a list of VueJS components
Ever wondered how you can loop through a list of VueJS components?
Let's say you have an array of components and you want to render them dynamically:
```
data() {
return {
components: ['ComponentOne', 'ComponentTwo', 'ComponentThree']
}
}
```
It's simple. We just need to use vue's dynamic component.
###Let's see how:
```
<ul>
<li v-for="component, index in components" :key="index">
<component :is="component"></component>
</li>
</ul>
```
Just make sure to register all the used components where you need them.
Vlad Craciun
23 Oct 2020
« Back to post