Vuetify rating component is not rendering

Question

I am trying to use Vuetify rating component in my app (https://vuetifyjs.com/en/components/ratings#ratings). I have Vuetify 1.5.5 installed, other components like buttons work fine. In this rating, the stars are not being rendered, only the text.

Any ideas about how I can fix this? I didn't find any relevant posts online. If someone can recommend any other stable vue rating component, that would also work.

This is the component where I am using the rating:

 <div>
    <span class="headerText">Dataset Product</span>
    <span class="headerDesc">Short description</span>
    <span class="headerDesc">@georgeBush.</span>
    <v-rating v-model="rating"></v-rating>
 </div>

My main.js file which has vuetify css import:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

I have also attached the screenshot of what was rendered.

Screenshot of rendered rating component, no stars

Did you define `rating` which is the `v-model` in the `data` section of your script? — vahdet, Mar 07 '19 at 06:14

score 3 · Accepted Answer · answered Mar 07 '19 at 06:57

3

It appears you may not using Material Icons library. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons

I was able to reproduce the error when I removed it from a Codepen.

answered Mar 07 '19 at 06:57

ExcessJudgment

228
1
9

Thank you @excessjudgement. This resolved the issue. Cheers mate! – Dryft Labs Mar 07 '19 at 15:14

Vuetify rating component is not rendering

1 Answers1