Métodos de mutación de representación de lista de Vue.js

Vue.js es un marco progresivo para crear interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.

Para repetir una tarea durante un tiempo fijo, hacemos uso del bucle for . El v-for se usa para atravesar el objeto y mostrar los datos requeridos según la elección del usuario. Hay una gran cantidad de datos que deben representarse en una página web. A veces, los datos que vienen en forma de array deben cambiarse. Se proporcionan métodos de mutación que se pueden usar para mutar o transformar la array original según nuestros requisitos. 

Sintaxis:

Mutate the array :          list.mutation_method()
To not mutate the array :   [...list].mutation_method()

Vue.js Lista de métodos de mutación de representación:

• push : este método se puede usar para agregar un nuevo elemento a la array.
• pop : este método se puede usar para eliminar elementos de la array.
• shift : este método se puede usar para cambiar la posición de los elementos y eliminarlos de la array.
• unshift : este método se puede usar para cambiar la posición de los elementos e insertarlos en la array. 
• empalme : toma los elementos de un rango específico en la array original.
• sort : este método se puede utilizar para ordenar la array.
• reverse : este método se puede usar para invertir la array.

Enfoque : aquí, crearemos un proyecto Vue y luego crearemos una interfaz de usuario diferente que muestre diferentes métodos de mutación de representación de listas.

Crear proyecto Vue :

Paso 1 : para crear una aplicación Vue, debe instalar módulos Vue con este comando npm. Debe asegurarse de tener el Node instalado previamente.

npm install vue

Paso 2 : use Vue JS a través de CLI. Abra su terminal o símbolo del sistema y ejecute el siguiente comando.

npm install --global vue-cli

Paso 3 : Ejecute el siguiente comando para crear el proyecto.

vue init webpack myproject

Paso 4 : después de crear su proyecto Vue, muévase a la carpeta para realizar diferentes operaciones.

cd myproject

Paso para ejecutar la aplicación : Abra la terminal y escriba el siguiente comando.

npm run dev

Abre tu navegador. Abra una pestaña con localhost ejecutándose (http://localhost:8080/) y podrá ver el resultado que se muestra en la imagen.

Estructura del proyecto : después de ejecutar los comandos (mencionados en los pasos anteriores), si abre el proyecto en un editor, puede ver una estructura de proyecto similar (como se muestra a continuación).

Estructura del proyecto

Ejemplo : este ejemplo ilustra los métodos de mutación de representación de lista en VueJS.

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2>Vue.js List Rendering Mutation Methods</h2>
    <h3>Initial Array : {{ numbers }}</h3>
    <h3>Splice array Index - (0,3) : {{ splice(numbers) }}</h3>
    <h3>Reverse the array : {{ reverse(numbers) }}</h3>
    <h3>Sort the Array : {{ sort(numbers) }}</h3>
    <h3>Shift array : {{ shift(numbers) }}</h3>
    <h3>Pop last 2 element : {{ pop(numbers) }}</h3>
  </div>
</template>
  
<script>
export default {
  name: "App",
  data() {
    return {
      numbers: [100, 200, 50, 40, 300],
    };
  },
  methods: {
    sort(numbers) {
      return [...numbers].sort((a, b) => a - b);
    },
    reverse(numbers) {
      return [...numbers].reverse();
    },
    splice(numbers) {
      return [...numbers].splice(0, 3);
    },
    shift(numbers) {
      let d = [...numbers];
      d.shift();
      return d;
    },
    pop(numbers) {
      let d = [...numbers];
      d.pop();
      d.pop();
      return d;
    },
  },
};
</script>

Producción:

Lista de métodos de mutación de representación

Referencia: https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods