Fiz exatamente como mostrado na aula porém, o Vue fica me mostrando o seguinte erro:
[plugin:vite:vue] <KeepAlive> expects exactly one child component.
O que pode ser?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Fiz exatamente como mostrado na aula porém, o Vue fica me mostrando o seguinte erro:
[plugin:vite:vue] <KeepAlive> expects exactly one child component.
O que pode ser?
Olá, Daniel!
O que pode está acontecendo é que o componente <KeepAlive> espera exatamente um único componente filho.
Tente agrupar seus componentes filhos em um elemento pai, como um <template>, e verifique se não há interferência com o código.
<KeepAlive include="SelecionarIngredientes">
<template v-if="conteudo === 'Selecionar Ingredientes'">
<SelecionarIngredientes
@adicionar-ingrediente="adicionarIngrediente"
@remover-ingrediente="removerIngrediente"
@buscar-receitas="navegar('MostrarReceitas')"
/>
</template>
<template v-else-if="conteudo === 'MostrarReceitas'">
<MostrarReceitas
@editar-receitas="navegar('Selecionar Ingredientes')"
/>
</template>
</KeepAlive>
Dessa forma, o <KeepAlive> sempre terá exatamente um filho, que será o <template> contendo o componente desejado, dependendo da condição avaliada.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Bom dia!
Descobri porque não funcionava. Quando existe um v-if, precisamos garantir para o KeepAlive que apenas um dos componentes será renderizado por vez. Meu código estava assim:
<KeepAlive include="SelecionarIngredientes">
<SelecionarIngredientes v-if="conteudo === 'SelecionarIngredientes'"
@addIngrediente="addIngrediente($event)"
@removeIngrediente="removeIngrediente"
@buscarReceitas="navegar('MostrarReceitas')"
/>
<MostrarReceitas
v-if="conteudo === 'MostrarReceitas'"
@editarLista="navegar('SelecionarIngredientes')"
/>
</KeepAlive>
Percebam que tenho dois v-if e isso na prática, funciona, contudo, o KeepAlive não entende assim. Para que funcione, preciso usar um v-else assim:
<KeepAlive include="SelecionarIngredientes">
<SelecionarIngredientes v-if="conteudo === 'SelecionarIngredientes'"
@addIngrediente="addIngrediente($event)"
@removeIngrediente="removeIngrediente"
@buscarReceitas="navegar('MostrarReceitas')"
/>
<MostrarReceitas
v-else
@editarLista="navegar('SelecionarIngredientes')"
/>
</KeepAlive>
Mas e se eu tiver mais que dois componentes? Aí provavelmente terei que envolver apenas o que precisa ser enviado para o cache com KeepAlive.
Obrigado pela atenção Victor.