[Vuejs]-Vue appropriate way to create a stats holder 1 out of 5, 3 out of 5

by

0👍

✅

You will have your star as an SVG (and you will supposedly have vue-svg-loader installed in your project) – and then build the stats component like this:

<template>
  <div class="flex">
    <StarIcon v-for="star in maximal" :key="star" 
              width="16" height="16" class="mx-1" 
              :fill="star <= value ? 'green' : 'grey'" 
    />
  </div>
</template>

<script>
import StarIcon from '@/icons/star.svg';

export default
{
  name: 'StatsComponent',
  components:
  {
    StarIcon,
  },
  props:
  {
    value:
    {
      type: Number,
      default: 0
    },
    maximal:
    {
      type: Number,
      required: true
    }
  }
}

If the current value is 0 – all stars are grey, if the current value is equal to the maximal – all stars are green.

Leave a comment