インデックス付き配列の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.cAtts [tIndex]』を評価対象ではありません） "

どのような考えですか？

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>