Vue.js Array Push


Vue.js Array Push– You can use .push method to add an element in array or object. Here in this tutorial, we are going to explain how you can add an element in array or object. You can also use our online editor to edit and run the code online.


Vue.js Array Push | Add Element To Array Example

You can add an element to an array or object simply as below-

Example:

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>List</h1>
  <div v-for="(listItem, index) in list">
    <input v-model="listItem.a" value="{{listItem.a}}">
   
  </div>
  
  <button @click="addList">
    Add New List
  </button>
  
  <b>{{ list }}</b>
</div>
<script>
 new Vue({
  el: '#app',
  data: {
    list: [{a: 'Hello World!' }] 
  },
  methods: {
    addList: function () {
      this.list.push({ a: 'Hello World!' });
    }  
  }
});
</script>        
</body>
</html>

Try it »

Ouput of above example-

Add an element to array

Advertisements

Add Comment

📖 Read More