I'm having an issue with dynamically generating a table using VueJS. The problem arises when creating the <th> elements.
In order to set them up, I have a Vue component that is called by the addRow function. This component uses templates with values extracted from two input fields named "Please add service" and "Please enter price". These values are then added to an array in the data object and cleared dynamically to allow for more items to be added.
Upon logging the array, I noticed that the objects I input remain stored regardless of how many items are added. However, their textual content does not appear in the new table rows.
After some research, my only speculation is that the elements may not be reactive. Despite having getters and setters, there seems to be no change. Another thought is that this issue might be related to scope.
I would appreciate any further advice on resolving this issue.
For reference, here is the full code: https://codepen.io/MrYY/pen/PeJjZy
Below are the Vue instance and Vue component:
Vue.component('table-row', {
template: '\<tr>\
<th>\
{{ this.name }}\
</th>\
<th>\
{{ this.price }}\
</th>\
\</tr>\
',
props: ['row']
})
var app = new Vue({
el: '#app',
data: {
companyName: "Company Name",
repName: "Representative's name",
phone: "+359-00-000-0000",
newService: "Please add service",
price: "Please enter price",
services: [
]
},
methods: {
addRow: function () {
this.services.push({
servicesName: this.newService,
price: this.price
});
this.newService = "Please add service";
this.price = "Please enter price";
}
}
})