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 ...

<td v-bind:colspan="footerColspan" class="summary">some text</td>

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

<th v-if="checkShowField(null, 'field_name')"scope="col">Name</th>

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!

You could just cheat and use an inordinately large colspan value, ie the maximum number of columns you expect. If you just want to span all columns, the colspan value can be equal to or larger than the number of columns — Phil
– Phil, Commented Aug 20, 2020 at 0:15
Can you post what this.products obj looks like? You shouldn't increment the footerSpan inside the checkShowField function. That can be determined using a computed field instead. — steven
– steven, Commented Aug 20, 2020 at 0:28
@Phil - I saw that somewhere yesterday. Unfortunately, I need to use the last two columns. So, essentially what I'm looking for is n-2 columns for the colspan. — Delford Chaffin
– Delford Chaffin, Commented Aug 20, 2020 at 13:36
@steven - this.products is a collection of products keyed by their id and each having several properties (most strings, but a couple arrays). But some of the properties are for display and some are for calculations. So, I can't just count the number of properties in it and use that. — Delford Chaffin
– Delford Chaffin, Commented Aug 20, 2020 at 13:39

steven · Accepted Answer · 2020-08-20 13:58:27Z

1

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

answered Aug 20, 2020 at 13:58

steven

3222 silver badges5 bronze badges

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

1 Comment

Delford Chaffin Over a year ago

I'm going to mark this as the correct answer as it does clarify why the infinite loop is happening and helps me understand why that strategy is doomed. Ultimately, I'm going to handle checking the columns based on an array of possivle viewable columns I'm going to pass into the page and that I can also use to count the columns for the colspan.

Collectives™ on Stack Overflow

Vue.js counter variable causing 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