Adding or removing elements from a list dynamically using VueJS?

Vue can be defined as a progressive framework for building the 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.

We can dynamically add or remove elements from a list in VueJS using the v-model directive. All the possibilities are binded to a single channel while using this directive. When the user selects an option out of several options, the same will be added to the list. On de-selecting the element it will be dynamically removed from the list. The below list shows the addition and deletion of elements dynamically.

Syntax

Following is the syntax to use the v-model directive ?

Hello, {{ username }}!

Here, the value of the username data property is bound to the value of the input element using the v-model directive. When the user types in the input field, the value of username will be updated automatically. The updated username value is then used in the template to display a personalized greeting message to the user.

The v-model directive can also be used with other form elements like checkboxes, radio buttons, and select elements to bind their values to Vue.js data properties.

Example

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

// Dynamically updating the list
const parent = new Vue({
   el : '#parent',
   data : {
      subjects : []
   }
})

• FileName - index.html

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

   

   
      

         
Choose Subjects you want to opt:

         
            Chemistry
         
            Physics
         
            Maths
         
            Accounts
         
            Biology
         
Subjects You Like:
            {{ subjects }}
         
      
      
   

Run the following command to get the below output ?

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

Complete Code

We can club the above code into a single HTML file. It will make us run the code in HTML.

   

   
      

         
Choose Subjects you want to opt:
         
            Chemistry
         
            Physics
         
            Maths
         
            Accounts
         
            Biology
         
Subjects You Like:
            {{ subjects }}
         
      
      
   

When you click on the check box the respective subject will be added to the list of subjects and when you uncheck the box the respective subject is removed from the list.

Example

In the below example, we demonstrate adding and removing elements dynamically from a list using HTML, CSS, and VueJS.

   
   
   

   
      

         
Dynamically Add/Remove List Items with VueJS
         

            
            Add Item
         
         

            

               {{ item }}
               Remove
            
         
      
      
   

In the above example, we use v-for directive to display the elements. We define two methods - removeItem() and addItem() to remove and add elements to the list. To implement the removeItem() method, we use splice() method and for implementing addItem() method we use push() method.

In this tutorial, we learned how to add or remove elements from a list dynamically using Vue.js. We looked at two examples.