VueJs呈現模板問題

我有一個問題來填充數據從模型到代碼當我多個單獨的數據模板。我需要的是第一個模板在firstFormDetails數組中呈現儘可能多的對象，並且與第二個模板相同。例如有下面我的代碼：VueJs呈現模板問題

<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' 
    });

來源

2016-10-09 Evgeny Ladyzhenskiy

您正在引用數據不正確。您的數據需要位於父組件中才能使用v-for – vbranden

我需要在組件之間拆分數據，因爲每個模板都有不同的HTML，並且應該通過AJAX加載不同的數據。我發現她的一個例子 - http://v1.vuejs.org/guide/components.html#Component-Option-Caveats –

嘗試向每個組件添加一個道具並將值綁定到它。你的道具是item，綁定在你的v-for中看起來像：：item =「item」，並且在每個組件中你都會添加道具：['item']'。或者更好的解決方案是將'v-for'移動到數據實際所在的子組件，或者將數據移動到父組件 – vbranden

必須定義您所使用的組件。讓我們嘗試使用這個：

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 
    } 
});

來源

2016-10-12 03:45:41 imcvampire

'Vue.component'註冊一個全局組件。它不需要包含在Vue實例中 – johnnynotsolucky

@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>

來源

2016-11-29 17:48:05 johnnynotsolucky

除了對@johnnynotsolucky的回答，您將需要一個包裝元素走出v型的因爲只允許其中只有一個元素。

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

來源

2017-03-08 21:16:51 ShaneX

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>

來源

2017-05-15 09:13:20

當Vue的應用程序被加載時，它查找組件字段，如果沒有則定義組件字段不組件加載，如果組分字段定義，Vue的查找該定義組件並解析它以進行語法檢查，一旦語法正確，組件被綁定。這是嵌套組件遞歸的。

註冊組件是強制性的

來源

2017-06-06 06:20:46

VueJs呈現模板問題

回答

相關問題