Vue.Js Delete Table Row
Vue.Js Delete Table Row On Button Click We can remove the table row by index or id on button click very easily. Here in this article we are going to explain how you to delete the table row. You can also use our online editor to edit and run the code online.
Delete Table Row On Button Click in Vue.JS Example
Here in this example we have removed the table row by the row index, we have deleted the item at that index.
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">
<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>
|
If you run the above example it will produce the output something like this-
Advertisements
