Render different Vue.JS components within a v-for directive

Question

I wonder how I could use a v-for to render different Vue components. I’m using Internet (I say this because I don’t know if Inertia has any function that can help). Being more specific and giving an example, let’s assume that I have a side menu in my application that consists of icons. There are 4 icons, where each one is named "Iconex", where X is a number from 1 to 4 to identify the icon. Using the directive v-for, I’d like to do something like:

<div v-for="(icone, i) in icones" :key="i">
    < {{icone}} />
</div>

I know this doesn’t work, but I just used to convey the idea of what I mean. Rebound though icones is an array with the names of the available icons: icones = [Icone1, Icone2, Icone3, Icone4]

Answer 1

What you want is to render components dynamically, for this follows an example:

<div v-for="(icone, i) in icones" :key="i">
    <component v-bind:is="icone"></component>
</div>

If you have more questions, you can take a look at this part of the documentation:
https://vuejs.org/v2/guide/components.html#Dynamic-Components

Answer 2

You can render whatever you want inside the v-for In this case to interpolate the icon inside the list, just remove the '<' and '/>' and leave only the interpolation with the keys "{{icone}}".

Example in Codepen

More information on interpolation can be found in this part of the documentation: https://br.vuejs.org/v2/guide/syntax.html