Why do I have recursive calls of computed function in vuejs?

Question

I have the following code in my Vuejs app: I bring some initial data in my app:

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');

And then I have this component:

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 problem is that when I don't have counter1 I get into ride function only once.

And when I add counter1, I have recursive calls to my ride function, and I get this in my 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]

Can someone explain why this is happening?

I would expect still to access the ride function only once.

Belmin Bedak · Accepted Answer · 2017-03-25 20:54:58Z

1

It's because you have setInterval assigned on variable counter1 and as suposed It would be invoked each 10k ms.

Into the setInterval you are changing the counter and when that change happened computed property ride would re-evaluate.

Hope It's clearer now.

answered Mar 25, 2017 at 20:54

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why do I have recursive calls of computed function in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related