VueJs render template issue

Question

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

You are referencing the data incorrectly. Your data needs to be located in the parent component to use v-for — vbranden
– vbranden, Commented Oct 9, 2016 at 18:32
I need to split data between components because I have different HTML for each template and different data should be loaded via AJAX. I found an example her - v1.vuejs.org/guide/components.html#Component-Option-Caveats — Evgeny Ladyzhenskiy
– Evgeny Ladyzhenskiy, Commented Oct 9, 2016 at 20:06
try adding a prop to each component and binding the value to it. your prop would be item and the binding would look like :item="item" in your v-for, and in each component you would add props: ['item']. alternately a better solution is to move the v-for to the child component where the data is actually located or move the data up to the parent component — vbranden
– vbranden, Commented Oct 9, 2016 at 21:42

johnnynotsolucky · Accepted Answer · 2016-11-29 17:48:05Z

6

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

answered Nov 29, 2016 at 17:48

johnnynotsolucky

5403 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quoc-Anh Nguyen · Accepted Answer · 2016-10-12 03:45:41Z

1

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

answered Oct 12, 2016 at 3:45

Quoc-Anh Nguyen

5,0961 gold badge25 silver badges34 bronze badges

1 Comment

johnnynotsolucky Over a year ago

Vue.component registers a global component. It does not need to be included in the Vue instance

AXE · Accepted Answer · 2017-03-08 21:16:51Z

0

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>

answered Mar 8, 2017 at 21:16

AXE

87510 silver badges14 bronze badges

Comments

K. Llamasares · Accepted Answer · 2017-05-15 09:13:20Z

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>

Vishal · Accepted Answer · 2017-06-06 06:20:46Z

0

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

answered Jun 6, 2017 at 6:20

Vishal

5373 silver badges13 bronze badges

Collectives™ on Stack Overflow

VueJs render template issue

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related