ShowEasyFrontEnd/FrontEnd/components/exhibition/Rating.vue

<template>
  <v-card outlined class="rounded-xl px-3">
    <v-card-title> {{ $t('Rating')}} </v-card-title>
    <v-card-text>
      <v-checkbox v-for="i in starts" :key="'out-' + i" v-model="ratingChecked" :value="i" color="#F5CDA8" class="my-0">
        <template v-slot:label>
          <v-icon v-for="j in i" :key="'in-1-' + j" color="#EE9546">
            mdi-star
          </v-icon>
          <v-icon v-for="j in 5 - i" :key="'in-2-' + j" color="#EE9546">
            mdi-star-outline
          </v-icon>
        </template>
      </v-checkbox>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      ratingChecked: [],
      starts: Array(5)
        .fill(1)
        .map((_, i) => {
          return 5 - i;
        }),
    };
  },
  watch: {
    ratingChecked() {
      this.$emit("selectRating", this.ratingChecked);
    },
  },
};
</script>

<style scoped lang="scss">
:deep() {
  .v-text-field__details {
    display: none !important;
  }

  .v-input__append-inner {
    margin-top: 12px !important;
  }

  .v-input--selection-controls__input {
    i {
      color: #f5cda8 !important;
    }
  }

  .v-label {
    color: #232323 !important;
    margin-left: 20px;
  }
}
</style>