How to Add List Items Onclick in VueJS ? Last Updated : 12 Apr, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In VueJS, we can make dynamic applications by adding list items on click. This allows for interactive user experiences where new items can be added to a list with a click event. The below approaches can be used to accomplish this task. Table of Content By creating a custom method to Add ItemsUsing Input field with v-modelBy creating a custom method to Add ItemsIn this approach, we are using Vue.js methods to handle the onclick event of a button. The addItem method adds new items to the list by pushing objects with unique IDs and text values into the items array, updating the list dynamically without a page refresh. Example: The below example uses a Method to Add Items to Add List Items Onclick in Vue JS. HTML <!DOCTYPE html> <html> <head> <title>Example 1</title> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id="app"> <h1> Using a Method to Add Items </h1> <h2>List Items</h2> <ul> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </ul> <button @click="addItem"> Add Item </button> </div> <script> new Vue({ el: '#app', data: { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' } ], nextItemId: 3 }, methods: { addItem() { this.items.push({ id: this.nextItemId++, text: `Item ${this.nextItemId}` }); } } }); </script> </body> </html> Output: Using Input field with v-modelIn this approach, we are using a computed property addItem that returns a function to handle adding items to the list when the button is clicked. The computed property is bound to the input field using v-model, enabling two-way data binding. Syntax:<input v-model="computedProperty">Example: The below example uses a computed Property with v-model to Add Items to Add List Items Onclick in Vue JS HTML <!DOCTYPE html> <html> <head> <title>Example 2</title> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id="app"> <h1> Using computed Property with v-model </h1> <h2>List Items</h2> <ul> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </ul> <input v-model="newItemText"> <button @click="addItem"> Add Item </button> </div> <script> new Vue({ el: '#app', data: { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' } ], nextItemId: 4, newItemText: '' }, computed: { addItem() { return () => { if (this.newItemText.trim() !== '') { this.items.push({ id: this.nextItemId++, text: this.newItemText }); this.newItemText = ''; } }; } } }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to loop through a list of elements and display it in VueJS ? G gauravgandal Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads Adding Filters in VueJS A Filter is a simple JavaScript function which is used  to change the output of a data to the browser. Filters in Vue.JS don't change the data directly wherever we store them, it only applies formatting to our data. The data remains the same only the output of a data to a browser is changed. Vue.JS 3 min read How to dynamically add or remove items from a list in Vue.js ? Vue 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 supportin 1 min read How to binding inline styles in Vue.js ? Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Every Web application needs HTML CSS styles for presenting a better User Interface. Vue.js allows you to dynamically render styling with data model structure. Usual 4 min read How to create instance in Vue.js ? A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual compo 2 min read How to loop through a list of elements and display it in VueJS ? Vue 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 supportin 2 min read How to Toggle a Class in Vue.js ? In this article, we will use Vue.js component with a simple HTML template containing <div> and button elements. The goal is to toggle the presence of a CSS class on the <div> element when the button is clicked. By understanding the concepts of data binding, conditional rendering, and eve 3 min read Like