Vue.Js Add Table Row
Vue.Js Add Table Row on Button Click We can add the table rows at the end of the table on button click very easily. Here in this article we are going to explain how you to add the table row at the end of the table. You can also use our online editor to edit and run the code online.
Add Table Row Dynamically in Vue.JS Example
It is very simple to add row at the end of table in Vue.JS, You just need to understand v-for and array/object in Vue.JS. Here in this tutorial we have created a simple example in which we have created one method to add row at the end of table.-
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>
</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);
}
} });
</script>
</body>
</html>
|
If you run the above example it will produce the output something like this-
Advertisements
