<html> <head> <script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> <body> <div id="app"> <h2>Push function in Vue Js,Insert a new object at the last index of array</h2> <button @click="myFunction">Add </button> <p>Add new object in an array</p> <table> <thead> <tr> <th>S.no</th> <th>Site Name</th> <th>Site Url</th> </tr> </thead> <tbody> <tr v-for='(site,index) in sites' :key='index'> <td>{{site.sno}}</td> <td>{{site.siteName}}</td> <td><a :href='site.siteUrl' target="_blank">{{site.siteUrl}}</a></td> </tr> </tbody> </table> </div> <script type="module"> import { createApp } from 'vue' createApp({ data() { return{ sites:[ { sno : 1, siteName : 'Sarkari Naukri Exams', siteUrl : 'https://www.sarkarinaukriexams.com/' }, { sno : 2, siteName: 'Tutorials Plane', siteUrl:'https://www.tutorialsplane.com/' } ], } }, methods:{ myFunction(){ this.results = this.sites.push({sno:3,siteName:'Font Awesome Icons',siteUrl:'https://fontawesomeicons.com/'}); }, } }).mount('#app') </script> </body> </head></html>