How I rewrite this code in VueJS using v-for?

Question

How I use the following code in vuejs using v-for?

@php $rating = 3; @endphp

@foreach(range(1,5) as $r)
<span class="fa-stack" style="width:1em">
    <i class="far fa-star fa-stack-1x"></i>

    @if($rating >0)
        @if($rating >0.5)
          <i class="fas fa-star fa-stack-1x"></i>
        @else
          <i class="fas fa-star-half fa-stack-1x"></i>
        @endif
    @endif

    @php $rating--; @endphp
</span>
@endforeach

I used following method. But I have no idea how I decrement rating.

<span class="fa-stack" style="width:1em" v-for="r in 5">
    <i class="far fa-star fa-stack-1x"></i>
    <i class="fas fa-star fa-stack-1x" v-if="product.average_rating > 0  && product.average_rating > 0.5"></i>
    <i class="fas fa-star-half fa-stack-1x" v-if="product.average_rating > 0  && !(product.average_rating > 0.5)"></i>
</span>

Migrating laravel template using vuejs

Uttara Info Tech
– Uttara Info Tech

2019-03-28 12:57:55 +00:00
Commented Mar 28, 2019 at 12:57 — Uttara Info Tech
– Uttara Info Tech, Commented Mar 28, 2019 at 12:57

D Malan · Accepted Answer · 2019-03-28 13:07:13Z

1

I don't think you can do in the same way as in blade, but if it is product.average_rating that you want to decrement, then you could replace product.average_rating with (product.average_rating - r + 1) everywhere in the code block you provided. Like this:

<span class="fa-stack" style="width:1em" v-for="r in 5">
    <i class="far fa-star fa-stack-1x"></i>
    <i class="fas fa-star fa-stack-1x" v-if="(product.average_rating - r + 1) > 0  && (product.average_rating - r + 1) > 0.5"></i>
    <i class="fas fa-star-half fa-stack-1x" v-if="(product.average_rating - r + 1) > 0  && !((product.average_rating - r + 1) > 0.5)"></i>
</span>

edited Mar 28, 2019 at 13:07

answered Mar 28, 2019 at 13:04

D Malan

11.6k3 gold badges35 silver badges65 bronze badges

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

2 Comments

Uttara Info Tech Over a year ago

can you provide an example?

D Malan Over a year ago

@UttaraInfoTech updated my answer with the example.

Collectives™ on Stack Overflow

How I rewrite this code in VueJS using v-for?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related