Apologies for my beginner question, but I have been struggling with a basic issue since yesterday and can't seem to find the solution.
I am trying to populate my logs variable with a JSON object and display it in an array.
Below is my HTML code :
<tbody>
<tr v-for="log in logs">
<td>{{log.incident}}</td>
<td>{{log.request}}</td>
<td>{{log.requested}}</td>
<td>{{log.message}}</td>
</tr>
</tbody>
And here is my JavaScript code:
let vm = new Vue({
el: '#container',
components: {
'table-header': tableHeader,
},
data: {
logs: []
},
methods: {
getLogs() {
addon.port.on('log', function (data) {
console.log(data);
this.$add('logs',data)
});
}
},
ready:{
function(){this.getLogs()}
}
});
vm.getLogs();
- The "ready" function doesn't appear to be working. Any idea why?
- Why is this.logs returning as undefined?
- It's showing an error that "this.$add is not a function". Why is that?
- Despite the code, the logs aren't populating in the loop in the HTML. What could be causing this issue?