Vue.Js Delete Table Row
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <table> <tr><th>Sample Table</th></tr> <tr v-for="(content, index) in tableRows"> <td>{{content}}</td><td><button @click='deleteTableRow(index)' >Delete</button></td> </tr> </table><br> <button @click='addTableRow()' >Add New Row</button> </div> <script> new Vue({ el: '#app', data: { tableRows:['Table Row 1', 'Table Row 2'], counter:2 }, methods:{ addTableRow: function () { this.counter++; this.tableRows.push("Table Row "+this.counter); }, deleteTableRow: function (idx) { this.counter--; this.tableRows.splice(idx, 1); } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <table> <tr><th>Sample Table</th></tr> <tr v-for="(content, index) in tableRows"> <td>{{content}}</td><td><button @click='deleteTableRow(index)' >Delete</button></td> </tr> </table><br> <button @click='addTableRow()' >Add New Row</button> </div> <script> new Vue({ el: '#app', data: { tableRows:['Table Row 1', 'Table Row 2'], counter:2 }, methods:{ addTableRow: function () { this.counter++; this.tableRows.push("Table Row "+this.counter); }, deleteTableRow: function (idx) { this.counter--; this.tableRows.splice(idx, 1); } } }); </script> </body> </html>
Copyrights@tutorialsplane.com