Vue.js List Rendering Mutation Methods

Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries.

In order to repeat a task for a fixed amount of time, we make use of the for loop. The v-for is used to traverse over the object and display the required data as per the user’s choice. There are a lot of data that needs to be rendered on a web page. Sometimes the data that comes in the form of an array needs to be changed. There are mutation methods provided that can be used to mutate or transform the original array as per our requirement. 

Syntax:

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

Vue.js List Rendering Mutation Methods:

• push: This method can be used to append a new element to the array.
• pop: This method can be used to remove element from the array.
• shift: This method can be used to shift elements position and remove them from the array.
• unshift: This method can be used to unshift the position of the elements and insert into the array. 
• splice: It takes the elements from a specific range in the original array.
• sort: This method can be used to sort the array.
• reverse: This method can be used to reverse the array.

Approach: Here, we will create a Vue project, and then we will create a different UI that showcases different list rendering mutation methods.

Creating Vue Project:

Step 1: To create a Vue app you need to install Vue modules using this npm command. You need to make sure you have the node installed previously.

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: Run the below command to create the project.

vue init webpack myproject

Step 4:  After creating your Vue project move into the folder to perform different operations.

cd myproject

Step to run the application: Open the terminal and type the following command.

npm run dev

Open your browser. Open a tab with localhost running (http://localhost:8080/) and you can see the output shown in the image.

Project Structure: After running the commands (mentioned in the above steps), if you open the project in an editor, you can see a similar project structure (as shown below).

Project Structure

Example: This example illustrates the List Rendering Mutation Methods in VueJS.

App.vue

<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>

Output:

List Rendering Mutation Methods

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