索引数组上的v-for

Question

我有一个非常复杂的web应用程序，目前正在尝试将其转换为VueJS…但当我尝试在索引数组上创建v-for循环时，似乎遇到了问题。我真的达到了VueJS的极限了吗？

下面是我的HTML循环的上下文：

        <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告诉我呈现函数有一个问题：“未定义的不是一个对象(计算‘thisView.c.cAttstIndex’)”

有什么想法吗？

Answer 1

这是一个示例程序，它演示了您的v-for嵌套是否按预期工作。您可能会检查您的数据结构是否完全符合这里的要求。

​

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>

​