Manipulando Arrays - Vue.js

No Vue.js, métodos específicos são definidos para simplificar o trabalho com arrays. Esses métodos permitem manipular os elementos de arrays diretamente:

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

Esses métodos são implementações baseadas nos métodos JavaScript padrão de mesmo nome. Eles funcionam de forma semelhante, mas têm uma diferença importante: notificam o sistema Vue.js sobre as alterações no array, permitindo que o componente seja re-renderizado conforme necessário.

Além desses métodos, que modificam o array diretamente, há métodos como filter(), concat() e slice() que retornam novos arrays sem alterar o original. Quando esses métodos são usados, recomenda-se vinculá-los a propriedades computadas para garantir que as mudanças sejam refletidas na interface.

Adicionando e Removendo Elementos

O exemplo a seguir demonstra como adicionar um elemento a um array e como remover elementos usando o índice correspondente:

<!DOCTYPE html>
<html>
<head>
    <title>Estudando 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="newPhone" />
    <button v-on:click="phones.push(newPhone)">Adicionar</button>
    </p>
    <ul>
    <li v-for="(phone, index) in phones" :key="index">
        <p>{{ phone }} <button v-on:click="phones.splice(index, 1)">Remover</button></p>
    </li>
    </ul>
</div>
<script>
Vue.createApp({
    data() {
        return { 
            newPhone: '',
            phones: ['iPhone 16', 'Samsung Galaxy S24', 'Xiaomi Mi 11', 'Motorola Edge 30']
        };
    }
}).mount('#app');
</script>
</body>
</html>

Neste exemplo, ao clicar no botão, o valor inserido no campo de texto (armazenado em newPhone) é adicionado ao array phones. O Vue.js re-renderiza automaticamente a lista, exibindo o novo elemento. Para cada item da lista, há um botão que remove o elemento correspondente, com base no índice fornecido.

Adicionando e Removendo Elementos de Arrays em Vue.js

Retornando um Novo Array

Métodos como slice(), concat() e filter() geram novos arrays sem alterar o original. O exemplo a seguir mostra como redefinir um array existente com o valor retornado por slice():

<!DOCTYPE html>
<html>
<head>
    <title>Estudando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <ul>
    <li v-for="phone in phones" :key="phone">
        <p>{{ phone }}</p>
    </li>
    </ul>
    <button v-on:click="updateList">Atualizar</button>
</div>
<script>
Vue.createApp({
    data() {
        return { 
            phones: ['iPhone 16', 'Samsung Galaxy S24', 'Xiaomi Mi 11', 'Motorola Edge 30']
        };
    },
    methods: {
        updateList() {
            this.phones = this.phones.slice(1, 3);
        }
    }
}).mount('#app');
</script>
</body>
</html>

Aqui, o método slice() retorna uma parte do array original, que é atribuída novamente ao atributo phones. Isso redefine os dados exibidos na interface.

Exemplo de uso do método slice() — Antes de Clicar no Botão "Atualizar"

Criação de um novo array com o método slice() — Depois de Clicar no Botão "Atualizar"

Embora funcional, essa abordagem pode não ser ideal se o array original precisar ser preservado. Em situações como essa, a separação entre os dados e a sua representação visual é preferível.

Uma solução mais eficiente é o uso de propriedades computadas para representar subconjuntos do array, sem modificar os dados originais:

<!DOCTYPE html>
<html>
<head>
    <title>Estudando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <input v-model.number="start" type="number" />
    <input v-model.number="end" type="number" />
    <ul>
    <li v-for="phone in visibleList" :key="phone">
        <p>{{ phone }}</p>
    </li>
    </ul>
</div>
<script>
Vue.createApp({
    data() {
        return { 
            start: 0,
            end: 3,
            phones: ['iPhone 16', 'Samsung Galaxy S24', 'Xiaomi Mi 11', 'Motorola Edge 30']
        };
    },
    computed: {
        visibleList() {
            return this.phones.slice(this.start, this.end);
        }
    }
}).mount('#app');
</script>
</body>
</html>

Neste exemplo, as propriedades start e end permitem ao usuário definir o intervalo de elementos exibidos. A propriedade computada visibleList utiliza o método slice() para retornar o subconjunto correspondente do array original. Isso garante que as alterações no intervalo se reflitam na interface, enquanto o array original permanece intacto.

Criando um Novo Array com o Método slice() e Preservando o Array Original