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告诉我渲染函数存在问题：“undefined不是对象（评估＆＃39; thisView.c.cAtts [tIndex]＆＃39;）”

有什么想法吗？

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>

索引数组上的v-for

1 个答案: