CODEWITHSUNDEEP
javascriptvue-componentvue.js
Shankar Thiyagaraajan
Shankar Thiyagaraajan

Reputation: 1815

Why Props data passing between Parent to Child not working in VueJS?

Here, i use some list of data in Javascript variable to pass to VueJs Template Loop.

My Javascript Variable,

var templates = {
                  0:{ 
                      'nb':1,
                      'column':2
                     },
                  1:{ 
                      'nb':1,
                      'column':2
                     }
              }

My Parent Template is,

   <div v-for="(te,index) in templates" class="row">
      <campaign_segment :t_nb="te.nb" :t_column=te.column>   </campaign_segment>
   </div>

Parent Template's Source,

<template v-if="showTemplate" id="segment_body">
        <b>@{{ t_nb }}</b>
        <div v-for="a in t_nb">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>
</template>

Child Template's Source,

    <template id="campaignBlock">
      <b>HIT</b>
    </template>

My VueJS,

  // For Parent Template
  Vue.component(
   'campaign_segment', {
   template: '#segment_body',
   props: ['t_nb', 't_column']
 });


// For Child Template
Vue.component('block', {
     template: '#campaignBlock'
});

In general,

       <div v-for="a in t_nb">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>

No loop were generated.

here, if i use,

        <div v-for="a in 2">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>

Loop is working fine.

Whats wrongs with this, why vuejs never uses the same instance to process the loop ?

Upvotes: 2

Views: 299

Answers (1)

Saurabh
Saurabh

Reputation: 73679

What I see is, there can be two issees:

  1. Having multiple components under template, so you can put all of them in a single div, as is solved here.
  2. Using parseInt in v-for, as it can be passed as a string in props instead of an integer, you can also put data type of props as explained here.

HTML

<template>
   <div v-if="showTemplate" id="segment_body">
        <b>@{{ t_nb }}</b>
        <div v-for="a in parseInt(t_nb)">
           <block v-if="t_column == 4 || t_column > 4"></block>  // <== Child Template,
         </div>
  </div>
</template>

Upvotes: 1

Related Questions