- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
202 Views
