vuejs - why this is infinite loop?

Question

I've got this "basic" function which is checking if [i] element in array is the same as id:

    checkArray(offer, id){
        if (id)
        {
            this.count=0;
            for (var i in offer.specialities) {
                if (offer.specialities[i] == id)
                {
                  console.log("bam!")
                  // this.count=+1;
                  return true;
                  break;
                } 
            }
            return false;
        }
        else {
            return true;
        }
    },

variable count is declared in vuejs data

data() {
  return {
    count: 0 
  } 
}

checkArray is called from v-show:

<v-layout  row wrap v-for="offer in offers.slice((current_page-1)*5, current_page*5)" 
v-show="checkArray(offer, speciality)">

at this point all works well. I've got two bams.

Now when I uncomment this.count=+1; I've got 200 bams! and my vuejs console screams:

[Vue warn]: You may have an infinite update loop in a component render function.

Why is this happening? How can I count number of bams in variable?

It isn't an infinite loop, it's a syntax error. You can't have for (i=0 in offer.specialities). You can have for (i in offer.specialities), but not with =0. — T.J. Crowder
– T.J. Crowder, Commented Jan 30, 2018 at 18:26
@gileneusz Where are you calling checkArray? ... can you provide the template piece of your code? What is most probably happening is that using this.count in your checkArray method is mutating the state over and over again, causing the component to re-render every time. — Ricky Ruiz
– Ricky Ruiz, Commented Jan 30, 2018 at 18:46

Ferrybig · Accepted Answer · 2018-01-30 19:12:37Z

Vue thinks you have an infinity loop because you read and modify the count variable inside the same loop.

Because you read the variable count in the loop, vue will start to watch the count variable for any updates.

Because you write the count variable, vue will rerun every listeners the next tick.

You should delegate the computation of your loop body into a seperate computed properties.

currentPageView() {
    return this.offers.slice((current_page-1)*5, current_page*5);
},

shownPageView() {
    const result = [];
    for(let i = 0; i < currentPageView.length; i++) {
        const offer = currentPageView[i];
        const id = this.speciality;
        if (id) {
            this.count=0;
            for (var i in offer.specialities) {
                if (offer.specialities[i] == id) {
                  result.push(offer);
                  break;
                } 
            }
        } else {
             result.push(offer);
        }
    }
    return result;
},

countSpecialOffers() {
    let count = 0;
    for(let i = 0; i < currentPageView.length; i++) {
        const offer = currentPageView[i];
        const id = this.speciality;
        if (id) {
            this.count=0;
            for (var i in offer.specialities) {
                if (offer.specialities[i] == id) {
                  count++;
                  break;
                } 
            }
        }
    }
    return count;
}

After doing this, you can access both shownPageView to loop over your results, and countSpecialOffers to get the count of the special offers

Collectives™ on Stack Overflow

vuejs - why this is infinite loop?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related