[Vuejs]-Why i can't use variable on for loop in VueJS?

by

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 !

👤Shankar Thiyagaraajan

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>

👤Kornelius Kristian Rayani

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>
👤Saurabh

Leave a comment