VueJs 渲染模板问题答案

【问题标题】：VueJs render template issueVueJs 渲染模板问题
【发布时间】：2016-10-09 16:08:09
【问题描述】：

当我拥有多个具有单独数据的模板时，我无法将模型中的数据填充到代码中。我需要的是第一个模板在 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'
   });

【问题讨论】：

您引用的数据不正确。您的数据需要位于父组件中才能使用 v-for
我需要在组件之间拆分数据，因为每个模板都有不同的 HTML，并且应该通过 AJAX 加载不同的数据。我找到了她的一个例子 - v1.vuejs.org/guide/components.html#Component-Option-Caveats
尝试为每个组件添加一个 prop 并将值绑定到它。您的道具将是项目，绑定在您的 v-for 中看起来像 :item="item"，并且在每个组件中您将添加 props: ['item']。或者更好的解决方案是将v-for移动到数据实际所在的子组件或将数据向上移动到父组件

标签： vue.js

【解决方案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>

【讨论】：

【解决方案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
  }
});

【讨论】：

Vue.component 注册一个全局组件。它不需要包含在 Vue 实例中

【解决方案3】：

除了@johnnynotsolucky 的回答之外，您还需要一个来自 v-for 的包装器元素，因为其中只允许一个元素。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

必须注册组件

【讨论】：