Here is the JavaScript code I am working with:
const storage = new Vue({
el: '#full-table',
delimiters: ['[[', ']]'],
data: {
events: [],
counter: 0,
},
methods: {
eventCounter: function() {
this.counter += 1;
return this.counter;
},
toTime: function(raw_time) {
console.log(raw_time)
return moment(raw_time * 1000).format('YYYY-MM-DD HH:mm:ss');
},
preprocessData: function(d) {
if (d["args"]["data"]) {
d["data"] = d["args"]["data"];
delete d["args"]["data"];
}
return d;
},
getData: function(query) {
let _this = this
$.get(events_api + 'json?' + query).done(function(new_data) {
data = new_data.data.map(
(item) => _this.preprocessData(item))
_this.events = data.slice(0, data.length);
console.log(_this.events)
}).fail(function(_, _, statusCode) {
$("#error").html(statusCode);
});
},
},
})
storage.getData('somequery')
This is the corresponding HTML markup:
<div id="full_table">
...
<tbody id="table_data">
<tr v-for="event in events" :key="event.time">
<td>[[ eventCounter() ]]</td>
<td>[[ toTime(event.time) ]]</td>
<td class="data">[[ event.data || '-' ]]</td>
<td>[[ event.action || '-' ]]</td>
<td>[[ event.desc || '-' ]]</td>
<td>[[ event.args || '-' ]]</td>
</tr>
</tbody>
...
</div>
The issue I am facing is multiple repetitions of console.log(raw_time), displaying FirstTime and SecondTime alternately:
FirstTime
SecondTime
FirstTime
SecondTime
...
Additionally, a warning appears stating:
[Vue warn]: You may have an infinite update loop in a component render function.I need help on how to prevent this infinite looping behavior after changing the array. Any suggestions?