How to display x elements with for loop in vue.js

Question

I have this for loop in my asp.net page, then in the same site I have to do the same but in vue.js, I'm not familiar with vue I've check the v-for but I can't manage to get the same result, can someone show me the right way please?

This is my for loop in asp.net, I just need to translate this in vue.js :

<div>
@for (i = 1; i <= 5; i++)
{
if (i <= (rating))
{
    <i class="icon-ned icon-ned-star red"></i>
}
else
{
    <i class="icon-ned icon-ned-star gray"></i>
}
}
</div>

Any ideas ?

tony19 · Accepted Answer · 2022-07-15 01:05:39Z

3

Did you checked vue documentation, its well written.

https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range

<div>
  <i 
   v-for="n in 5"
   class="icon-ned icon-ned-start"
   :class="{
     'red': n <= rating,
     'gray': n > rating
   }"
  ></i>
</div>

or :class="n <= rating ? 'red' : 'gray'" for classes list with toggling

edited Jul 15, 2022 at 1:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 16, 2019 at 7:52

Emīls Gulbis

2,0701 gold badge12 silver badges14 bronze badges

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

6 Comments

adiga Over a year ago

OP also wants to add grey and red icons based on rating

Emīls Gulbis Over a year ago

Edited answer with icons and colors

novoa Over a year ago

ok I see, the thing is that it's a 5 stars rating, so if I have 4/5 the last star should be other color

novoa Over a year ago

I must have something wrong in the syntaxe, I'm getting this in the page <= rating ? 'red' : '', n > rating ? 'gray' : ''] > do you know why?

Emīls Gulbis Over a year ago

You don't need to use array syntax there, use previously mentioned :class="n <= rating ? 'red' : 'gray'". Of course be sure if "rating" is defined for you

|

Dharman · Accepted Answer · 2021-09-16 12:01:11Z

0

I just ran into this problem and fixed it like you see below;

Please Note that I am using google material icons for this purpose and tailwind for the styling. but either way this will still work with plain CSS just make sure you declare the classes you are aiming at correctly;

Here you go:

<span 
 v-for="n in 5"
 :key="n"
 :class=" 
   n <= rating 
     ? 'text-yellow-400 material-icons' 
     : 'text-gray-300 material-icons'
    ">
 star 
 </span>

edited Sep 16, 2021 at 12:01

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 16, 2021 at 11:55

fotiecodes

6267 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to display x elements with for loop in vue.js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related