Почему передача данных Props между родителем и потомком не работает в VueJS?

Здесь я использую некоторый список данных в переменной Javascript для передачи в цикл шаблонов VueJs.

Моя переменная Javascript,

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

Мой родительский шаблон,

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

Источник родительского шаблона,

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

Источник дочернего шаблона,

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

Мой VueJS,

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


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

В целом,

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

Цикл не был сгенерирован.

здесь, если я использую,

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

Цикл работает нормально.

Что с этим не так, почему vuejs никогда не использует один и тот же экземпляр для обработки цикла?


javascript vue.js vue-component
person Shankar Thiyagaraajan    schedule 14.12.2016    source источник
comment
но t_nb всегда передается 1, так как nb в templates всегда 1?   -  person Saurabh    schedule 14.12.2016
comment
@saurabh, но у меня пусто ... Даже не одна строка. Если я передам 1, то я получу одну строку в качестве вывода!   -  person Shankar Thiyagaraajan    schedule 14.12.2016
comment
segment_body должен иметь корневой элемент, фрагменты больше не поддерживаются. Вы проверили консоль на наличие ошибок или предупреждений?   -  person Mat J    schedule 14.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

То, что я вижу, может быть два issees:

  1. Имея несколько компонентов в шаблоне, вы можете поместить их все в один div, как это решается здесь.
  2. Используя parseInt в v-for, поскольку его можно передать как строку в свойствах вместо целого числа, вы также можете указать тип данных свойств, как описано здесь.

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>
person Saurabh    schedule 14.12.2016