I'm working on implementing a Vue 3 component that can dynamically insert rows into a table. This is what I have so far:
<template>
<table>
<tbody>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td>D{{item.id}}</td>
<td><input type="text" v-model="item.Filename"></td>
<td><input type="text" v-model="item.ImageTitle"></td>
<td><input type="text" v-model="item.Caption"></td>
</tr>
</tbody>
</table>
<button @click.stop="insert_Row">add row +</button>
<div v-for="item in tableRows" :key="item.id">
{{item}}
</div>
</template>
<script>
export default {
data() {
return {
tableRows: [
{
"id": 1,
"Filename": "test",
"ImageTitle": "test",
"Caption": "test"
}
]
}
},
methods: {
insert_Row() {
this.tableRows.push(
{
"id": this.tableRows.length+1,
"Filename": "",
"ImageTitle": "",
"Caption": ""
}
)
}
}
}
</script>
However, the current setup includes an initial row by default before clicking the add button. I want to make it so that the first row is also dynamically added when the button is clicked. Any suggestions on how I can achieve this?