CODEWITHSUNDEEP
vue.jsvuejs2
user3780094
user3780094

Reputation: 53

v-for on indexed array

I have a very complex web application and am currently trying to convert it to VueJS … but seem to have hit a problem when I try to create a v-for loop on an indexed array. Have I actually hit a limitation of VueJS?

Here’s the contexts for my HTML loop:

        <div v-for="(thisView,vIndex) in viewSettings">
            <div v-for="(theTemplate,tIndex) in iTemplates" v-bind:id="'tmpt-vf-tab-'+thisView.incID+'-'+tIndex">
                <span class="attribute-controls" v-for="thisAtt in thisView.c.cAtts[tIndex]">
                    <input type='checkbox' v-model='thisAtt.useAtt'/> {{ thisAtt.attID }}
                </span>

VueJS tells me that there is a problem with the render function: “undefined is not an object (evaluating 'thisView.c.cAtts[tIndex]')”

Any thoughts?

Upvotes: 1

Views: 957

Answers (1)

Roy J
Roy J

Reputation: 43881

Here's an example program that demonstrates your v-for nestings working as expected. You might check whether your data structure is exactly what works here.

new Vue({
  el: '#app',
  data: {
    viewSettings: [{
      c: {
        cAtts: [
          [{
            useAtt: false,
            attID: 'only'
          }],
          [{
              useAtt: true,
              attID: 'first'
            },
            {
              useAtt: false,
              attID: 'second'
            }
          ]
        ]
      }
    }],
    iTemplates: [2, 3]
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  <div v-for="(thisView, vIndex) in viewSettings">
    <div v-for="(theTemplate, tIndex) in iTemplates">
      <div class="attribute-controls" v-for="thisAtt in thisView.c.cAtts[tIndex]">
        <label>{{thisAtt.attID}} <input type='checkbox' v-model='thisAtt.useAtt' /></label> {{thisAtt.useAtt}}
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions