In my Vuejs application, I start by fetching initial data and setting it in the store:
const app = new Vue({
router,
store,
mounted: function() {
var that = this;
$.get("/initial_data/", {}, function(data) {
that.$store.dispatch('set_initial_data', data);
});
}
}).$mount('#app');
Following that, I have a component defined as:
var myComponent = Vue.component('root', {
...
data() {
return {
counters: []
}
},
computed: {
ride() {
if (this.$store.getters.data["rides"]) {
const that = this;
var limit = this.$store.getters.data["rides"][0]["Movements"].split(" : ");
that.counters.push(0);
console.log(that.counters);
var counter1 = setInterval(function () {
that.counters.splice(0, 1, that.counters[0] + 1);
}, 10000);
return this.$store.getters.data["rides"][0];
}
else {
return "";
}
},
...
}
});
The issue arises when not using `counter1`, causing the `ride` function to be called only once.
When including `counter1`, recursive calls are made to the `ride` function resulting in the displayed output in the console:
[0, __ob__: Observer]
all.js:196 [1, 0, __ob__: Observer]
all.js:196 [2, 0, 0, __ob__: Observer]
all.js:196 [3, 0, 0, 0, __ob__: Observer]
all.js:196 [4, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [5, 0, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [6, 0, 0, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [7, 0, 0, 0, 0, 0, 0, 0, __ob__: Observer]
This behavior is puzzling. Can anyone provide insight into why this recursion is happening?
I would anticipate accessing the `ride` function just once as expected.