I have a table that updates when new data is created,
and I want to achieve this using Vue.js
I decided to explore Vue.js Components and give it a try.
<div id="app1">
<table class="table table-bordered">
<tr>
<td class="active">name</td>
<td class="active">price</td>
</tr>
<my-trtd></my-trtd>
</table>
JS
Vue.component('my-trtd', {
template: '<tr><td>' + 1 + '</td>' +
'<td>' + 2 + '</td></tr>'
})
new Vue({
el: '#app1'
})
result
<div id="app1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<table class="table table-bordered">
<tbody>
<tr>
..
</tr>
</tbody>
</table>
Although it works, it's not quite what I want.
This is my expected result:
<div id="app1">
<table class="table table-bordered">
<tbody>
<tr>
<td class="active">name</td>
<td class="active">price</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
How can I fix this?