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>

Answer 2

您必须定义您使用的组件。让我们尝试使用它：

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

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

new Vue({
  el: '#app',
  components: {
    'first': first,
    'second': second
  }
});

Answer 3

此外，在@johnnynotsolucky的回答中，你需要一个v-for的包装元素，因为它只允许一个元素。

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

Answer 4

var first = Vue.component('first', {
  template: '#template-first',
  props: ['item']
});

var second = Vue.component('second', {
  template: '#template-second',
  props: ['item']
});

new Vue({
  el: '#app',
  components: {
    'first': first,
    'second': second
  },
  data: function () {
    return {
      firstFormDetails: [
        {docNumber: 7},
        {docNumber: 7777},
        {docNumber: 10000}
      ],
      secondFormDetails: [
        {docNumber: 1908},
        {docNumber: 7777},
        {docNumber: 10000}
      ]
    }
  }
});

<div id="app">
  <first v-for="item in secondFormDetails" :item="item"></first>
  <second v-for="item in firstFormDetails" :item="item"></second>
</div>

<template id="template-first">
  <div> {{ item.docNumber }}</div>
</template>

<template id="template-second">
  <div> {{ item.docNumber }}</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

Answer 5

当加载Vue应用程序时，它会查找组件字段，如果未定义组件字段，则不加载组件，如果定义了组件字段，Vue将查找组件的定义并解析它以进行语法检查，一旦语法是正确的，组件是绑定的。对于嵌套组件，这会以递归方式发生。

注册组件是必须的

VueJs渲染模板问题

5 个答案: