Manipulando Arrays no 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

Documentação oficial:

Array Change Detection