using v-for in vue js component - vue.js

Question

I need to dynamically add rows to my table, when I add some data in vue component. I am using v-for it must automatically add rows after adding data, but it doesn't show me anything, just a table header.
<table style="width: 95%;" cellspacing="0" id="main2">
<tbody>
<tr>
<th style="width: 55%; background-color: #343434; color: #FFFFFF; text-align: left; font-weight: normal; "><span class="target-field" data-path="name_word_output">Назва</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="quantity_word_output">Кількість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="rate_word_output">Вартість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="amount_word_output">Разом</span></th>
</tr>
<tr v-for="item in rowData">
<td style="border: 1px solid #ddd;"><span class="target-field" data-path="issue.name">{{item.tovarname}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="issue.quantity"></span> <span class="target-field" data-path="issue.unit">{{item.fakturahowmany}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.price_per_one">{{item.fakturaprice}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.amount">{{item.fakturahowmany*item.fakturaprice}}</span></td>
</tr>
</tbody>
</table>
and another part
methods: {
addItem(){
this.$root.totalprice+=this.$root.fakturahowmany*this.$root.fakturaprice;
var my_object = {
tovarname:this.$root.tovarname,
fakturahowmany:this.$root.fakturahowmany,
fakturaprice:this.$root.fakturaprice,
};
this.$root.rowData.push(my_object)
//
this.$root.tovarname = 1;
this.$root.fakturahowmany = 1;
this.$root.fakturaprice = 1;
}
}
}
How can I fix it? Thanks!

Answer 1

You have to start a unique key for the items through v-bind: key = "item.id" in your v-for
<tr v-for="item in rowData" v-bind:key="item.id" >
link: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State