v-for on indexed array

Question

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?

There's too much -- it's a large complex web app. But I've looked at it (output on console and put into JSONLINT) and it looks fine. And it's been working in Ractive. — user3780094
– user3780094, Commented Apr 5, 2017 at 19:30
Does thisView.c.cAtts exist for each item? It may be an idea to return this from a method where you can put a check in to see if an object exists. — craig_h
– craig_h, Commented Apr 5, 2017 at 19:41
Are you asking if the size of thisView.c.cAtts is as big as iTemplates. The answer is yes, I've checked it. — user3780094
– user3780094, Commented Apr 5, 2017 at 19:44
My real concern is if I can use an index (such as tIndex) into a nested array in dot notation on an object created by another v-for loop (thisView): in other words, can VueJS resolve the expression "thisView.c.cAtts[tIndex]" in order to make a new v-for loop? My worry is that this is not supported, as I can't find any problem with the data. — user3780094
– user3780094, Commented Apr 5, 2017 at 19:46

Roy J · Accepted Answer · 2017-04-05 20:17:14Z

2

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>

answered Apr 5, 2017 at 20:17

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

2 Comments

user3780094 Over a year ago

Thanks for the confirmation that this should work, in principle. I was just about to try something similar …

user3780094 Over a year ago

I just found the problem: a typo in a v-if directive! Thanks for your help!

Collectives™ on Stack Overflow

v-for on indexed array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related