VueJs渲染模板问题

Question

我有一个问题是将模型中的数据填充到代码中,而不仅仅是一个带有单独数据的模板.我需要的是第一个模板渲染的次数与firstFormDetails数组中的对象数量相同,而第二个模板的数量相同.我的代码示例如下:

 <div id="app">
  <first v-for="item in secondFormDetails" track-by="id"></first>
  <second v-for="item in firstFormDetails" track-by="id"></second>
 </div>

 <template id="template-first">
  <div> {{ item.docNumber }}</div>
 </template>

 <template id="template-second">
  <div> {{ item.docNumber }}</div>
 </template>

而VueJs模块如下:

  Vue.component('first', {
     template: '#template-first',
     data: function() {
       return {
         firstFormDetails: [
           {docNumber: 7},
           {docNumber: 7777},
           {docNumber: 10000}
         ]
       }
     }
   });

   Vue.component('second', {
      template: '#template-second',
      data: function() {
        return {
          secondFormDetails: [
            {docNumber: 1908},
            {docNumber: 7777},
            {docNumber: 10000}
          ]
        }
      }
    });

   new Vue({
     el: '#app'
   });

Answer 1

@vbranden是正确的,移动v-for到组件中

 <template id="template-first">
  <div v-for="item in firstFormDetails"> {{ item.docNumber }}</div>
 </template>

 <template id="template-second">
  <div v-for="item in secondFormDetails"> {{ item.docNumber }}</div>
 </template>