Solucionado
<li v-for="ingrediente in ingredientes" :key="ingrediente" class="ingrediente">
{{ ingrediente }}
</li>
para quem está fazendo o curso na versão mais atualizada, segue o padrão atual, onde para mapear os dados corretamente o vuejs precisa desse atributo :key, assim facilita a precisão do DOM html para o framework (acabei de ver que na aula seguinte ele explica sobre isso)
hoje, com a Alura e o Google Gemini
Olá, Robert.
Tudo bem?
Obrigada por compartilhar essa sugestão. Você está absolutamente correto. A diretiva :key é muito importante quando estamos trabalhando com listas no Vue.js. Ela ajuda o Vue a rastrear cada nó em uma lista e pode ser muito útil para melhorar a performance da aplicação.
No código que você compartilhou:
<li v-for="ingrediente in ingredientes" :key="ingrediente" class="ingrediente">
{{ ingrediente }}
</li>
Você está atribuindo o próprio ingrediente como uma chave única para cada item da lista. Isso é perfeitamente válido se você tiver certeza de que cada ingrediente é único. No entanto, em uma situação onde os ingredientes pudessem ser repetidos, seria melhor usar um identificador único para cada item, como um ID.
Aqui está um exemplo:
<li v-for="(ingrediente, index) in ingredientes" :key="index" class="ingrediente">
{{ ingrediente }}
</li>
Neste exemplo, estou usando o index como chave. O index é a posição do item na lista, que é sempre única. Portanto, mesmo que tenhamos ingredientes repetidos, cada item terá uma chave única.
Espero ter ajudado e bons estudos!