How to Use the Vuetify Rating Component

The Vuetify rating component is useful for collecting user feedback. Users can use it to indicate their level of satisfaction with certain content. Read on to find out more about this component and the various ways in which we can customize it.

The Vuetify Rating Component (v-rating)

We use v-rating to create a rating component.

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Creating a Vuetify rating component.

The user can indicate various levels of satisfaction by clicking on one of the items.

Clicking on a star of the Vuetify rating component.

Vuetify Rating Value

We use the value prop to programmatically set the number of selected items on the rating component. The default is 0.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating></v-rating>
      <v-rating :value="3"></v-rating>
      <v-rating :value="5"></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting the value prop of the Vuetify rating component.

Vuetify Rating v-model

We can use v-model to set up a two-way binding between the value of the v-rating and a variable. In the code example below, we use v-model to create a rating component with text below it displaying the current value:

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating v-model="rating"></v-rating>
    </div>
    <div class="d-flex ma-2 justify-center">
      Rating: {{ rating }}
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 0,
  }),
};
</script>
Using v-model on the Vuetify rating component.

We can also use the two-way binding to add a button that changes the rating when clicked:

<template>
  <v-app>
    <div class="d-flex ma-2 justify-center">
      <v-rating v-model="rating"></v-rating>
    </div>
    <div class="d-flex ma-2 justify-center">
      Rating: {{ rating }}
    </div>
    <div class="d-flex ma-2 justify-center">
      <v-btn
        @click="rating = 5"
        color="primary"
      >
        5 stars
      </v-btn>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 0,
  }),
};
</script>
Using v-model on the Vuetify rating component.

Readonly

We can turn off interactivity with the v-rating component with the readonly prop.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        :value="3"
        readonly
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the rating prop of the v-rating component.

Vuetify Rating Colors

v-rating comes with the color and background-color props for customizing its color. We can use any color from the Material design spec.

The color prop sets the color of the selected items, while the background-color prop sets the color of the unselected items.

<template>
  <v-app>
    <div class="text-center">
      <v-rating
        v-model="rating"
        background-color="purple accent-4"
        color="purple"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="primary"
        color="pink"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="green"
        color="orange"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="yellow darken-3"
        color="green"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="red"
        color="red"
      >
      </v-rating>

      <v-rating
        v-model="rating"
        background-color="indigo"
        color="indigo"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 3,
  }),
};
</script>
Customizing the colors of the Vuetify rating component.

Vuetify Rating Length

We can use the length prop to set the number of rating levels we want the rating component to have.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        :value="3"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="6"
        :value="3"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="7"
        :value="4"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="8"
        :value="4"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
      <v-rating
        length="9"
        :value="5"
        color="yellow darken-3"
        background-color="grey darken-1"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the length prop of the v-rating component.

Vuetify Rating Hover

Setting the hover prop makes the v-rating display visual feedback when the user hovers over it with the mouse.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating hover></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    rating: 3,
  }),
};
</script>
Using the hover prop of the Vuetify rating component.

Vuetify Rating Half Increments

Use the half-increments prop to allow selection of half rating level increments.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="0.5"
      ></v-rating>
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="2.5"
      ></v-rating>
      <v-rating
        hover
        half-increments
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="4.5"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the half-increments prop of the Vuetify rating component.

Vuetify Rating Size

We can customize the size of the rating component with the same classes available in the icon component (v-icon).

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        x-small
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        small
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        medium
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        large
      ></v-rating>
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        x-large
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting the size of the v-rating component.

We can also customize the size by setting the size prop to a numerical value:

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating
        hover
        color="yellow darken-3"
        background-color="grey darken-1"
        :value="3"
        v-for="num in 5"
        :key="num"
        :size="num * 10"
      ></v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Setting the size of the Vuetify rating component.

Item Slot

v-rating comes with an item slot that we can use to apply a greater amount of customization.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-rating v-model="rating">
        <template v-slot:item="props">
          <v-icon
            :color="
              props.isFilled
                ? getColor(props.index)
                : 'grey lighten-1'
            "
            large
            @click="props.click"
          >
            {{
              props.isFilled
                ? 'mdi-star-circle'
                : 'mdi-star-circle-outline'
            }}
          </v-icon>
        </template>
      </v-rating>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    colors: [
      'primary',
      'yellow darken-3',
      'red',
      'purple accent-4',
      'indigo',
    ],
    rating: 4,
  }),
  methods: {
    getColor(index) {
      return this.colors[index];
    },
  },
};
</script>
Using the item slot of the Vuetify rating component.

Conclusion

We can use the Vuetify rating component (v-rating) in our application to collect user feedback. This component comes with various props and slots that allow customization.



11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *