Why i can't use variable on for loop in VueJS?

Question

I use VueJS (in Laravel) to perform simple loop with variable's value.

Here, value comes from the template props.

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

Here, i cant get loop for 2 times.

If i pass value of "t_nb" as 2 in direct manner like,

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

then, i get OUTPUT as,

 1
 2

But i pass same value on both, vuejs only accepts the direct assignment.

Whats wrong with my code ?

How is this possible or any other solutions ?

Kornelius Kristian Rayani · Accepted Answer · 2017-01-03 03:39:10Z

1

Try to specify your t_nb props as an array, eg:

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

And, then if you want to assign a new value for t_nb props, do:

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

answered Jan 3, 2017 at 3:39

Kornelius Kristian Rayani

1211 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shankar Thiyagaraajan · Accepted Answer · 2017-01-03 05:07:34Z

1

Finally i find out my mistake.

Here, the loop having trouble to find it's datatype.

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

to

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

Now its works charm.

Issue is to specify the Datatype.

Thank to @saurabh.

Thank You all !

edited Jan 3, 2017 at 5:07

answered Jan 3, 2017 at 4:50

Shankar Thiyagaraajan

1,8255 gold badges30 silver badges47 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:36:41Z

0

It seems there are two things wrong with your code.

First thing: You have to include you HTML in the template, as following. As you component seg is taking template '#segment', it has to enclose all the relevant 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>

Second thing: You have to pass props: t_nb=2 where you are rendering seg component, it should be like following:

<seg tn_b=2></seg>

edited Jul 16, 2022 at 4:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 12, 2016 at 6:24

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

2 Comments

Shankar Thiyagaraajan Over a year ago

but, why not variable ?

Saurabh Over a year ago

because v-for searches the variables used inside vue instance. You are also having t_nb as props.

Collectives™ on Stack Overflow

Why i can't use variable on for loop in VueJS?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related