Question

在这里，我使用Javascript变量中的一些数据列表传递给VueJs Template Loop。

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

我看到的是，可能有两个问题：

在模板下有多个组件，因此您可以将所有组件放在一个div中，并解决here。
在parseInt中使用v-for，因为它可以作为字符串而不是整数传递，您也可以按照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>

为什么Props数据在父对子之间传递不能在VueJS中工作？

1 个答案: