VueJSで動作していない親と子の間で渡されるPropsデータはなぜですか？

Question

ここでは、VueJsテンプレートループに渡すためにJavascript変数のデータのリストを使用します。

マイ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が同じインスタンスをループ処理に使用しないのはなぜですか？私が見る何

Answer 1

は2 isseesがあることができ、次のとおりです。テンプレートの下に複数のコンポーネントを持つ

1. 、そうhere解決されると、あなたは、単一divでそれらのすべてを置くことができます。
2. v-forにparseIntを使用すると、整数の代わりに小道具の文字列として渡すことができるため、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>