Filtrando e Ordenando Arrays no Vue.js
Filtrando Elementos do Array
Ao trabalhar com arrays, uma necessidade comum é filtrar elementos com base em critérios específicos. No Vue.js, propriedades computadas são frequentemente utilizadas para implementar esse tipo de lógica, pois permitem criar resultados temporários sem alterar os dados originais.
O exemplo a seguir mostra como filtrar itens dinamicamente com base no texto digitado em um campo de entrada:
<!DOCTYPE html>
<html>
<head>
<title>Explorando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>
<input type="text" v-model="company" placeholder="Buscar por empresa" />
</p>
<ul>
<li v-for="phone in filteredList">
<p>{{ phone.title }} - {{ phone.company }}</p>
</li>
</ul>
</div>
<script>
Vue.createApp({
data() {
return {
company: "",
phones: [
{ title: "iPhone 16", company: "Apple" },
{ title: "iPhone 12", company: "Apple" },
{ title: "Galaxy S24", company: "Samsung" },
{ title: "Galaxy A10", company: "Samsung" },
{ title: "Xiaomi Redmi 8", company: "Xiaomi" },
],
};
},
computed: {
filteredList() {
const comp = this.company.trim().toLowerCase();
if (comp === "") {
return this.phones;
}
return this.phones.filter((phone) => {
return phone.company.toLowerCase().includes(comp);
});
},
},
}).mount("#app");
</script>
</body>
</html>Neste exemplo, os itens do array phones são filtrados dinamicamente com base no texto digitado no campo de entrada. A propriedade computada filteredList é recalculada automaticamente sempre que o valor de company muda. Se o campo estiver vazio, todos os itens do array são exibidos.
Ordenando Elementos do Array
A ordenação de arrays pode ser implementada de maneira dinâmica, permitindo alterar o critério de ordenação conforme necessário. O exemplo a seguir demonstra como ordenar uma tabela ao clicar nos cabeçalhos:
<!DOCTYPE html>
<html>
<head>
<title>Explorando Vue 3</title>
<meta charset="utf-8" />
<style>
a:hover {
cursor: pointer;
}
td,
th {
text-align: left;
padding: 8px;
border: 1px solid #000;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<thead>
<tr>
<th><a @click="sortParam = 'title'">Modelo</a></th>
<th><a @click="sortParam = 'company'">Empresa</a></th>
<th><a @click="sortParam = 'price'">Preço</a></th>
</tr>
</thead>
<tbody>
<tr v-for="phone in sortedList">
<td>{{ phone.title }}</td>
<td>{{ phone.company }}</td>
<td>{{ phone.price }}</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.createApp({
data() {
return {
sortParam: "",
phones: [
{ title: "Galaxy A10", company: "Samsung", price: 500 },
{ title: "iPhone 12", company: "Apple", price: 800 },
{ title: "iPhone 16", company: "Apple", price: 1000 },
{ title: "Xiaomi Redmi 8", company: "Xiaomi", price: 300 },
{ title: "Galaxy S24", company: "Samsung", price: 900 },
],
};
},
computed: {
sortedList() {
switch (this.sortParam) {
case "title":
return [...this.phones].sort(sortByTitle);
case "company":
return [...this.phones].sort(sortByCompany);
case "price":
return [...this.phones].sort(sortByPrice);
default:
return this.phones;
}
},
},
}).mount("#app");
const sortByTitle = (a, b) => a.title.localeCompare(b.title);
const sortByCompany = (a, b) => a.company.localeCompare(b.company);
const sortByPrice = (a, b) => a.price - b.price;
</script>
</body>
</html>Neste exemplo, o critério de ordenação é definido pela propriedade sortParam. Ao clicar em um dos cabeçalhos da tabela, o valor de sortParam é atualizado, e a propriedade computada sortedList é recalculada automaticamente. O array original não é alterado diretamente, pois uma cópia do array (...this.phones) é usada antes da ordenação.
Documentação oficial: