-1

Gostaria de saber como eu poderia usar um v-for para renderizar diferentes componentes vue. Estou usando inertia (digo isso porque não sei se a Inertia possui alguma função que possa ajudar). Sendo mais específico e dando um exemplo, vamos supor que eu tenha um menu lateral na minha aplicação que é formado por ícones. São 4 ícones, onde cada um é nomeado "IconeX", onde X é um número de 1 a 4 para identificar o ícone. Usando a diretiva v-for, gostaria de fazer algo como:

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

Sei que isso não funciona, mas apenas usei para passar a ideia do que quero dizer. Ressalto ainda que icones é um array com os nomes dos ícones disponíveis: icones = [Icone1, Icone2, Icone3, Icone4]

2 Respostas 2

1

O que você está querendo é renderizar componentes dinamicamente, para isso segue um exemplo:

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

Caso tenha mais dúvidas, pode dar uma olhada nessa parte da documentação:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

0

Você pode rendezirar o que quiser dentro do v-for Nesse caso para interpolar o icone dentro da lista, basta você retirar os '<' e '/>' e deixar apenas a interpolação com as chaves "{{icone}}".

Exemplo no Codepen

Mais informações sobre interpolação pode encontrar nessa parte da documentação: https://br.vuejs.org/v2/guide/syntax.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .