Filtrando e Ordenando Arrays - 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.