<html> <head> <script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> <body> <div id="app"> <h3>Add Table Row Dynamically in Vue Js</h3> <button @click="addRow">Add Row</button> <br /> <table> <thead> <tr> <th>Row Number</th> <th>Name</th> <th>Number</th> </tr> </thead> <tr v-for="(tableData,index) in tableRows" :id="index"> <td>{{tableData}}</td> <td><input type="text" /></td> <td><input type="number" /></td> </tr> </table> </div> <script type="module"> import { createApp } from "vue"; createApp({ data() { return { tableRows: ["Row 1"], counter: 1, }; }, methods: { addRow() { this.counter++; this.tableRows.push("Row " + this.counter); }, }, }).mount("#app"); </script> </body> </head></html>