Uma introdução à renderização de lista em Vue
Aprenda como usar a diretiva v-for do Vue para renderizar listas.
Uma das tarefas mais comuns no desenvolvimento web é renderizar listas de dados. O Vue lida com isso com a ajuda da diretiva v-for. Você explorará o que é a diretiva v-for, como remover itens de uma lista e como renderizar listas com chaves.
Qual é a diretiva v-for no Vue?
A diretiva v-for é uma das diretivas do Vue que permite renderizar listas com o mínimo de código JavaScript. A diretiva v-for funciona de forma semelhante ao loop for em JavaScript e pode iterar sobre matrizes e objetos para renderizar itens em uma lista.
Para utilizar a diretiva v-for, forneça um array que você deseja iterar na propriedade data do objeto Options no Vue.
Por exemplo:
<template>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
};
</script>
O bloco de código acima descreve um exemplo de aplicativo Vue que utiliza a diretiva v-for para iterar sobre o array names fornecido nos dados. propriedade.
v-for tem um valor definido para uma expressão com duas partes: a variável de iteração (nome) e o array nomes v- for aponta para. A variável de iteração contém cada nome na matriz nomes e exibe o nome.
Vue cria um novo elemento Document Object Model (DOM) para cada name no array names e o renderiza na página web.
Se o array names mudar (por exemplo, um novo nome for adicionado ou um antigo for removido), o Vue atualizará automaticamente o DOM virtual e renderizará novamente a lista para refletir os dados atualizados.
Vue também oferece uma maneira de obter o índice de um elemento em uma lista.
<li v-for="(name,index) in names">{{ name }} -- {{ index }}</li>O código acima descreve a sintaxe para exibir o índice de cada nome no array nomes.
Você também pode utilizar a diretiva v-for para percorrer um intervalo de números:
<li v-for="num in 10">Vue is Nice</li>
O código acima irá renderizar uma lista com o texto Vue is Nice dez vezes. A diretiva v-for também pode percorrer um intervalo de números para exibir dados repetidamente ou executar uma operação. Neste caso, a variável de iteração num é usada para acessar o item atual na lista.
Como remover itens de uma lista no Vue
Você pode permitir que os usuários removam itens de listas no seu aplicativo web. Este recurso é útil ao criar aplicativos como uma lista de tarefas.
Você pode usar o método JavaScript splice (que é uma das maneiras de remover itens de arrays) para remover um item de uma lista no Vue.
array.splice(startIndex, numToRemove, newElements)
O método splice pode adicionar ou remover itens de um array. O método splice aceita os parâmetros na seguinte ordem:
- O parâmetro startIndex define o índice no qual começar a modificar o array.
- numToRemove indica o número de itens que você deseja remover do array.
- Finalmente, o parâmetro newElements, que você pode usar para adicionar elementos ao array. Se nenhum elemento for especificado, splice() removerá apenas elementos do array.
Para usar o método splice para remover um item de uma lista no Vue, você precisa saber o índice desse item. Uma maneira de conseguir isso é passar o índice como argumento para um método que trata da remoção do item.
Por exemplo, você pode adicionar um botão próximo a cada nome no array que aciona um método para remover o item quando um usuário clica nele:
<template>
<ul>
<li v-for="(name,index) in names">
{{ name }} -- {{ index }}
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
</template>
O parâmetro index nos dá acesso ao índice de cada nome no array, que este programa passa como argumento para o método removeItem. O método removeItem pode então usar o método splice para remover um nome do array nomes:
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
methods: {
removeItem(index) {
this.names.splice(index, 1);
}
}
};
</script>
O script acima usa o método splice para remover um nome da lista de nomes renderizados. Isso atualizará automaticamente a lista na IU para refletir a matriz atualizada.
Como renderizar listas com chaves no Vue
O atributo key é um atributo exclusivo que o Vue usa para rastrear a identidade de cada item da lista. Quando um item na lista muda, com a ajuda do atributo key o Vue pode atualizar rapidamente o DOM sem renderizar novamente a lista inteira.
Vamos dar uma olhada em um exemplo de renderização de uma lista com chaves no Vue:
<template>
<div>
<ul>
<li v-for="name in names" :key="name.id">
{{ name.name }}
<button @click="removeItem(name.id)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
names: [
{ id: 1, name: "John"},
{ id: 2, name: "Doe"},
{ id: 3, name: "James"},
],
};
},
methods: {
removeItem(key) {
this.names.splice(key - 1, 1);
},
},
};
</script>
Neste exemplo, você tem uma lista de itens com propriedades id exclusivas. O bloco de código usa o atributo key com a diretiva v-for para rastrear a identidade de cada item na lista. Isso permite que o Vue atualize o DOM com eficiência quando a lista for alterada.
Se você removesse um item da lista, o Vue atualizaria o DOM sem precisar renderizar novamente a lista inteira. Isso ocorre porque o Vue mantém a identidade de cada item da lista e pode atualizar apenas os itens que foram alterados.
O atributo key deve ser um identificador exclusivo para cada item da lista. Pode ser uma propriedade id ou qualquer outro identificador exclusivo que possa ser usado para rastrear o item.
Usar o atributo key com a diretiva v-for ajuda a evitar problemas de renderização. Por exemplo, ao remover os nomes, o Vue utiliza o atributo key para manter a ordem dos itens na lista.
As diretivas Vue são essenciais
Aqui, você abordou os fundamentos da renderização de listas no Vue, incluindo a remoção de itens de listas e a renderização de listas com chaves. Você pode construir interfaces responsivas que lidam com listas de dados complexas ao compreender esses conceitos.
Vue possui uma infinidade de diretivas para diferentes finalidades, incluindo renderização condicional, vinculação de eventos e vinculação de dados. Compreender essas diretivas pode ajudá-lo a criar aplicativos da web interativos eficientes.