CODEWITHSUNDEEP
javascriptvue.js
jostrander
jostrander

Reputation: 754

How do I use Vue.js v-for to iterate over a Number variable?

For example, say I have a positive integer variable, rating.

The documentation http://vuejs.org/guide/list.html#Range-v-for only lists using Number directly, however switching the number out for a variable doesn't work as expected.

I currently am doing this:

<i v-for="i in rating" class="fa fa-2x fa-star">{{ rating }}</i>

but unfortunately it's only showing once, even through ratings value is 4. Am I missing anything in the documentation?

Upvotes: 3

Views: 2354

Answers (1)

jostrander
jostrander

Reputation: 754

I figured out what the issue was, I am passing the rating value in via property, so it was being passed in as a string. See non-working example here:

<rating-component value="rating"></rating-component>

vs

<rating-component :value="rating"></rating-component>

By switching out value property to :value, to use the literal variable instead of the string variable it fixed my issue.

Upvotes: 3

Related Questions