How do I append a table row at the end on an element click in VueJS? - vue.js

Question

I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.
<template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add"><a class="add-link"><span #click="insert_Row()" class="plus-icon">+</span></a></td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2',"<input type='text'>", "<input type='text'>", "<input type='text'>"],
counter: 2
},
methods: {
insert_Row() {
this.counter++;
this.tableRows.push("D " +this.counter);
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border:1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover, &:focus {
border:1px solid #182241;
background-color: #182241;
}
}
</style>
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.* <template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click="insert_Row()" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2', " < input type = 'text' > ", " < input type = 'text' > ", " < input type = 'text' > "], counter: 2 }, methods: { insert_Row() { this.counter++; this.tableRows.push("
D " +this.counter); } } }
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style> ``` Okay now, after a good response, I have edited the code. It now looks like this. ``` <template>
<table id="myTable">
<tbody>
<tr>
<td scope="row" data-label="">D1</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr>
<td scope="row" data-label="">D2</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td scope="row" data-label="">D{{item.id}}</td>
<td data-label="Filename">
<input type="text" v-model="item.Filename">
</td>
<td data-label="Image Title">
<input type="text" v-model="item.ImageTitle">
</td>
<td data-label="Caption">
<input type="text" v-model="item.Caption">
</td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click.stop="insert_Row" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableRows: [{
"id": 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
}]
}
},
methods: {
insert_Row() {
this.tableRows.push({
"id": this.tableRows.length + 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
})
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style>
I want to only have the icon plus on the last row cell. I wish to hide or remove the others, but also, I edited the code to start with 3 rows instead of one.

Answer 1

Your data should be reactive.
You should bind your data to the html inputs.
You need to rethink your code a lot. Here is an example of how you could get started: Vue SFC Playground