Vue: componentes e lista

Neste capítulo você vai extrair um cartão de oficina e listar com v-for. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 08-vue-componentes do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

v-for com key

Liste oficinas com v-for. Informe :key estável, como id.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<li v-for="o in oficinas" :key="o.id">{{ o.nome }}</li>

Mude uma coisa e preveja

Inclua mais uma oficina no array.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A lista cresce.

Se não acontecer

oficinas precisa ser reativo (ref).

Componente filho

Defina um componente CartaoOficina e registre-o. Props descem; eventos sobem.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

app.component('cartao-oficina', {
  props: ['nome'],
  template: `<article class='card'><h2>{{ nome }}</h2></article>`
});

Mude uma coisa e preveja

Passe uma prop descricao e mostre no template.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O cartão exibe a descrição.

Se não acontecer

Declare a prop nova em props.

Emitir evento ao pai

O filho avisa interesse; o pai atualiza a lista de inscritos fictícios.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<button @click="$emit('interesse')">Tenho interesse</button>

Mude uma coisa e preveja

Conte quantos interesses foram emitidos.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O contador no pai sobe.

Se não acontecer

Escute @interesse no uso do componente.

Atividades

Atividade 1

Por que :key em v-for?

Atividade 2

Como o filho fala com o pai?

Atividade 3

Props devem ser alteradas no filho?

Respostas comentadas

Resposta da atividade 1

Identificar nós de forma estável na reconciliação.

Resposta da atividade 2

Emitindo eventos ($emit).

Resposta da atividade 3

Não; trate props como somente leitura.

O arquivo completo

Referência do exemplo 08-vue-componentes, reproduzida aqui para que você possa conferir sem sair da página.

styles.css

:root{--ink:#1a1a1a;--bg:#f7f4ef;--brand:#1f3a5f;--accent:#c45c26;--line:#d9d2c5;--focus:#0b57d0}
*{box-sizing:border-box}html{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;line-height:1.5}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem}
header,footer{background:var(--brand);color:#fff;padding:1rem 1.25rem}header a,footer a{color:#fff}
main{max-width:52rem;margin:0 auto;padding:1.25rem}h1{color:var(--brand);margin-top:0}
.card{background:#fff;border:1px solid var(--line);padding:1rem;margin:.75rem 0}
button{background:var(--accent);color:#fff;border:0;padding:.55rem 1rem;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(3,4.5rem);gap:.4rem}
.square{width:4.5rem;height:4.5rem;font-size:1.5rem;background:#fff;border:2px solid var(--brand)}
label{display:block;margin:.5rem 0 .2rem;font-weight:600}
input,textarea{width:100%;max-width:28rem;padding:.45rem;border:1px solid var(--line)}
ul.nav{list-style:none;padding:0;display:flex;gap:1rem;flex-wrap:wrap;margin:0}
.status{font-weight:600;margin:.75rem 0}