为什么在父子之间传递的道具数据在 VueJS 中不起作用？

Question

在这里，我使用 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从不使用相同的实例来处理循环？

Answer 1

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

在模板下有多个组件，因此您可以将所有组件放在一个 div 中，如已解决。
在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>

为什么在父子之间传递的道具数据在 VueJS 中不起作用？

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

javascript

vue.js

vue-component