How to add elements to an Array using filters in Vue ?


Vue can be defined as a progressive framework for building user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them.

In the below article, we will see how to add elements to an array. An array is basically a collection of elements. This process of adding elements into an Array can be used in real life in different scenarios. For E.g.: It can be used for creating a shopping list, adding employees to a list and etc.

We can achieve the above functionality by using the v-for directive from Vue. We can loop over the current array, copy all its elements and then add the new elements to a new array.

Syntax

Following is the syntax to call a filter using Vue loops (v-for directive)

$options.filters.addLast(data, other_parameters)

Example: Adding elements to an Array

Copy paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.

  • FileName - app.js

  • Directory Structure -- $project/public -- app.js

// Adding elements to the below list
const parent = new Vue({
   el: '#parent',
   data: {
      arr1: ['Mike', 'John', 'Elena', 'Nick']
   },
   filters: {
      addLast: function (arr, item_arr) {
   
         // Using the spread syntax to add the
         // items to the end of the array
         const final_list = [...arr, ...item_arr]
         return final_list
      }
   }
})
  • FileName - index.html

  • Directory Structure -- $project/public -- index.html

<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></script>
</head>
   <body>
      <div id='parent'>
         <p>
            <strong>Current List : </strong>
            <ol>
               <li v-for='item in arr1'>
                  <strong>{{item}}</strong>
               </li>
            </ol>
            <strong>Final List : </strong>
            <ol>
               <li v-for='item in $options.filters.addLast(arr1, ["Bill","Steve","Rachel"])'>
                  <strong>{{ item }}</strong>
               </li>
            </ol>
         </p>
      </div>
      <script src='app.js'></script>
   </body>
</javascript>

Run the following command to get the below output −

C://my-project/ > npm run serve

Complete Program

Below is a complete code created using the above two code snippets – app.js and index.html. Now you can easily run the below program as an javascript file.

<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></script>
</head>
   <body>
      <div id='parent'>
         <p>
            <strong>Current List : </strong>
            <ol>
               <li v-for='item in arr1'>
                  <strong>{{item}}</strong>
               </li>
            </ol>
            <strong>Final List : </strong>
            <ol>
               <li v-for=' item in $options.filters.addLast(arr1, ["Bill","Steve","Rachel"])'>
                  <strong>{{ item }}</strong>
               </li>
            </ol>
         </p>
      </div>
      <script>
      
         // Adding elements to the below list
         const parent = new Vue({
            el: '#parent',
            data: {
               arr1: ['Mike', 'John', 'Elena', 'Nick']
            },
            filters: {
               addLast: function (arr, item_arr) {
               
                  // Using the spread syntax to add the
                  // items to the end of the array
                  const final_list = [...arr, ...item_arr]
                  return final_list
               }
            }
         })
      </script>
   </body>
</javascript>

Here we demonstrated how to add the elements to an array easily and dynamically based on changes to data and/or filters in Vue.js.

Updated on: 12-Apr-2023

271 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements