VueJSのforループで変数を使用できないのはなぜですか？

Question

私はVueJS（Laravel）を使って変数の値を持つ単純なループを実行します。

ここでは、値はテンプレートの小道具に由来します。

HTML：

<template id="segment" t_nb=2></template> 


<div id="test_loop"> 
    <b>@{{ t_nb }}</b> 
    <div v-for="a in t_nb"> 
    <seg>@{{ a }}</seg> 
    </div> 
</div> 

VueJS：

Vue.component(
'seg', { 
    template: '#segment', 
    props: ['t_nb'] 
     } 
    ); 

OUTPUT：ここ

<!-- (Empty)--> 

、私は2回のループを取得傾けます。

私は、その後、のような直接的な方法で、2通り

<div v-for="a in 2"> 
    <seg>@{{ a }}</seg> 
    </div> 

を "t_nb" の値を渡すと、私は

1 
2 

、としてOUTPUTを取得するが、私は上に同じ値を渡しますどちらの場合も、vuejsは直接割り当てのみを受け入れます。

私のコードで何が間違っていますか？

どうすれば可能ですか？

Answer 1

最後に私は私の間違いを見つけます。

ここでは、ループがデータ型を見つけるのに問題があります。

<div v-for="a in t_nb"> 
    <seg>@{{ a }}</seg> 
    </div> 

今

<div v-for="a in parseInt(t_nb)"> 
    <seg>@{{ a }}</seg> 
    </div> 

にその作品の魅力。

問題は、データ型を指定することです。

@saurabhに感謝します。

ありがとうございました！

Answer 2

コードには2つの問題があるようです。

最初のもの：次のようにHTMLにテンプレートを組み込む必要があります。 segというコンポーネントがテンプレート'#segment'を受け取っているので、関連するすべてのHTMLを囲む必要があります。

<template id="segment"> 

    <div id="test_loop"> 
    <b>@{{ t_nb }}</b> 
    <div v-for="a in t_nb"> 
     <seg>@{{ a }}</seg> 
    </div> 
    </div> 
</template> 

第二の事：あなたはpropsに合格する必要があります：t_nb=2あなたがsegコンポーネントをレンダリングされている場合、それは次のようにする必要があります：

<seg tn_b=2></seg> 

Answer 3

は、配列、例えばとして小道具t_nbあなたを指定してください：

props: { 't_nb': { type: Array, default: [1, 2], // Value that you want to loop } }

そして、あなたは、t_nb小道具の新しい値を割り当てる行う場合：

<seg :t_nb="[3,4,5,6]"></seg>