Vue.js counter variable causing infinite loop

Question

So, I have some data coming in and rendering a table with an indeterminate number of columns. I would like to count those columns to correctly display a colspan td in the footer. I initialize a variable called footerCallspan with a value of 2...

var app = new Vue({
  el: '#order-products',
  data: {
    footerColspan: 2, // default to 2 for title and quantity
  },
  //...

My footer table cell looks like ...

some text

Each of the columns in the main table check a function to determine whether or not they should display ...

Name

Finally, that function looks like ...

checkShowField(p, field) {
  let pTest = p;
  if (p == null) {
    pTest = this.products[Object.keys(this.products)[0]];
  }
  if (pTest.hasOwnProperty(field)){
    if (p == null) { // only increment on header row
      // let span = this.footerColspan + 1;
      // alert(span);
      // this.footerColspan = span;
      // alert(this.footerColspan);
    }
    return true;
  }
  return false;
},

No matter how I try to increment footerColspan inside that function, it seems to create an infinite loop.

I'm new to Vue, so I'm not sure if trying to increment that variable causes the table to re-render therefore triggering more calls to that function or what.

Anyone have any guidance here? If not, any other suggestions for counting the number of columns for my purpose?

Thanks!

user_13945395 · Answer

I suspect your infinite loop issue is caused by incrementing this.footerColspan inside a v-if check. Basically footerColspan is reactive and the redraw happens every time it is changed and then v-if changed it again, and thus the infinite loop.

if there is a sample of your products structure and what determines the columns to be displayed, it will be easier to try and come up with a solution to count the columns

Vue.js counter variable causing infinite loop

1 Answers