Vue2: v-for starts causing warnings, but keeps going and chokes browser

so… i have been using this v-for loop for a while now and i’ve added a method to do some additional stuff within the loop. now it is throwing these warnings:

Property or method "colName" is not defined on the instance but referenced during render
//  'colName' has been working without issue literally since day one
Property or method "ind" is not defined on the instance but referenced during render
//  likewise, 'ind' has worked warning-free since it was first implemented

these particular ‘properties’ are part of the v-for, as such don’t need to be pre-defined, AND have always worked without a peep… until i added the v-ifs, then it wen’t nuts. BUT! it doesn’t STB and it works just fine. why is this even showing up? (one error for each row…)

here’s the HTML:

<table v-if='payload' id="reportList" class="table table-hover table-striped">
      <th v-for="colName in Object.keys(modifiedRows[0])" v-if="displayColumn(colName)"
          :class="{ sortingBy: (colName == sortKey) }" @click.prevent="keyChange(colName)">
        {{ colName }}
      <th :class="{ sortingBy: (colName == sortKey) }" v-if='displayColumn(payload.choice)'>
  <tbody class="table-sm">
    <tr v-for="(row,index) in modifiedRows" :key="index">
      <td v-for="(value, ind) in row" @click="doTheThing(row, storedList.choice)"
          :class="{ alignCenter: (alignColumn(ind,storedList.choice)) }"                      
          :key="ind" v-if="displayColumn(ind)" :inner-html.prop="row[ind] | yesNo">
        <!--  inner-html.prop FTW!  :D  -->                  
      <td v-if='displayColumn(payload.choice)'>
        <input type="checkbox" :value="row" v-model='selectedForEmail' :key="ind">

and the JS data:

data: {
  selectedForEmail: [],

so everything (almost) is working, why the sudden warnings? it’s irritating.

EDIT: this is rather important as the error messages are so numerous (1 per row) that it crashes the browser. last check: it horks up over 16GB of RAM… so WTH is going on??

EDIT2: tightened up the code. updated/added some other things. still borked. what irritates me more is that i can’t yet find WHICH colName and ind it’s objecting to… :confused:

Maybe this from docs will help: v-if with v-for

There’s a number of things that could be going on performance wise. As @MindfulDev posted, be wary of v-if within loops. It can be quite expensive. A better approach is to pre-compile your data before rendering it.

Same goes for this line Object.keys(modifiedRows[0]). There’s no point in fetching the Object.keys on each render, use a computed so it’s cached.

The last part is how many rows you’re trying to render at a time, but if you haven’t had any issues previously, I’m guessing it’s not that many and that you’re being thrown into an endless loop of sorts which is whats hanging up your browser.

this is just supposed to generate a table of data from whatever data source the user selects. problem is, some of the data fields, from some of the data sources, the client doesn’t want displayed at the table stage, but are required further along the process. i know. clients: forking irritating…

the v-ifs don’t appear that expensive with sub-1000 records. it’s the bloody warnings that are generated for each damn line. that are choking the browser. as i mentioned, this worked fine until i added the second if check on the `checkbox’. but i’m recalling a post you helped me with before where i was trying to do too much with one function and i think that might be where i am at again. FMP.

i don’t know what you mean by caching the Object.keys. modifiedRows is already computed, so why would i need a separate compute of the keys for that? i’m not understanding, sorry. :confused:

EDIT: the odd thing is that this method doesn’t throw the same warnings when it is used elsewhere with virtually identical data. so it’s something in the data… which i’ll have to comb through… thanks though.

I’ve had odd problems having a v-if on a v-for tag. In one case I was able to use a v-show instead and another was to put a template tag around it and put the v-for in that.