I'm having trouble with creating a table using a Vue component. My goal is to add rows to the table by clicking on the "Add" button, but it doesn't seem to be working correctly. Every time I click the "Add" button, I see the row being added to the table briefly before disappearing again. I suspect that this issue is related to Vue reactivity, but I can't pinpoint where I've gone wrong. Can someone please help me identify my mistake?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Titles</title>
</head>
<body>
<form id = "app" >
<conf-table v-on:add-panel="addPanel" :table = "tabledata" ></conf-table>
</form>
<template id = "table-template">
<div>
<table class="lowertable">
<tr>
<th width="220"><div id= "ConvHeader">No.</div></th>
<th width="130" >Panel</th>
</tr>
<tr v-for="(elem, index) in table" :key = "index">
<td >{{elem.id}}</td>
<td ><input id = "convConfTable_nr" name="" type="search" :value=elem.name /></td>
</tr>
</table>
<input v-on:click="addPanelChild" class="button" name="button" type="submit" value="Add" />
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script th:inline = "javascript">
var tableData = [];
Vue.component('conf-table', {
template: "#table-template",
props: ['table'],
methods: {
addPanelChild: function() {
this.$emit("add-panel");
},
}});
var vueApp = new Vue({
el: "#app",
data: {
tabledata: tableData,
},
methods: {
addPanel: function() {
var panel = {
id: 77,
name: "Qwerty"
};
this.tabledata.push(panel);
}
}
})
</script>
</html>