CODEWITHSUNDEEP
vue.js
Evgeny Ladyzhenskiy
Evgeny Ladyzhenskiy

Reputation: 151

VueJs render template issue

I've an issue to fill data from model into code when I'v more then one template with separate data. What I need is first template renders as many times as many objects in firstFormDetails array and same the second one. There example of my code below: 

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

And VueJs module as follows:

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

Upvotes: 2

Views: 1077

Answers (5)

Vishal
Vishal

Reputation: 537

When Vue app is loaded, it looks for component field, if component field is not defined then not component is loaded, if component field is defined, Vue looks for the definition of the component and parse it for syntax checking, once the syntax is correct the component is binded. This happens recursively for nested components.

Registering a component is mandatory

Upvotes: 0

K. Llamasares
K. Llamasares

Reputation: 33

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>

Upvotes: 0

AXE
AXE

Reputation: 865

in addition on @johnnynotsolucky 's answer, you will need a wrapper element out of v-for, since only allow only one element inside it. 

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

Upvotes: 0

johnnynotsolucky
johnnynotsolucky

Reputation: 540

@vbranden is correct, move the v-for into the component

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

Upvotes: 6

Quoc-Anh Nguyen
Quoc-Anh Nguyen

Reputation: 5086

You must define what components you use. Let try to use this:

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

Upvotes: 1

Related Questions