The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the rating component are not being displayed, only the text appears.

Does anyone have any suggestions on how to resolve this? I couldn't find any helpful information online. Alternatively, if someone could recommend a different Vue rating component that is stable, that would be great too.

This is the section of code 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>

Here is my main.js file which includes the import for Vuetify CSS:

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

I have also attached a screenshot showing how the rating component was rendered without the stars:

See the screenshot here

javascriptcssvue.jsvuetify.js

Answer №1

Could it be that you forgot to include the Material Icons library in your project? Here's the link to download it:

I encountered the same issue when I omitted it from a Codepen experiment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

javascripthtmlcssreactjs

Angular JS is facing difficulties in being able to call upon another directive

I'm encountering an issue where including another directive related to the current one results in the following error message Error: [$compile:ctreq] http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=myApp.pagereel&p1=ngTransclude Script.js ...

javascriptangularjs

Struggling to get your HTML to Express app Ajax post request up and running?

I’m currently in the process of creating a Node Express application designed for storing recipes. Through a ‘new recipe’ HTML form, users have the ability to input as many ingredients as necessary. These ingredients are then dynamically displayed usi ...

javascriptjquerynode.jsajaxexpress

Inject a value sent from response.render directly into the script tag

Below you will find a pug snippet. I am looking for a way to dynamically insert the user value into the chatConfig object. script. var chatConfig = { user : 'foo', pass : 'bar', } When rendering from my Express applicatio ...

javascriptnode.jsexpresspug

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Passing an array data from parent to child component has brought up some interesting scenarios: parent.component.html: <child-component ... [options]="students" > </child-component> Status I: Setting the array on definition ...

javascriptangulartypescript

Using Ajax.Updater to run JavaScript code

I've tried numerous online tutorials and examples, but haven't had much success... I'm looking to execute JavaScript from an HTML Response in Ajax. Here's my code snippet: <script src="prototype.js" type="text/javascript"></ ...

javascriptajaxjquery

Save a document to the file system and retrieve it using Express

Can res.download() be used after writing a file to the filesystem? router.get('/exportjson', (req, res, next) => { let json = `{"@dope":[{"set":"","val":"200"}],"comment":"comment","folderType":"window"}` const file = `${__dirname}/upload-f ...

javascriptnode.jsexpress

Tips for running a function in CodeBehind triggered by jQuery?

In my Aspx code, I have the following: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

javascriptc#jqueryasp.netwebforms

Determine the mean value from an array of JSON objects in an asynchronous manner

Can you help me calculate the average pressure for each device ID in this JSON data set? [ { "deviceId": 121, "Pressure": 120 }, { "deviceId": 121, "Pressure": 80 }, { "deviceId": 130, "P ...

javascriptarraysnode.jsjsonasynchronous

The process of flattening an array in Zustand: a comprehensive guide

In my array of brands, each brand object includes a brand name and products. Initially, I successfully added a new brand object to the brands list. However, when attempting to add another brand while keeping the previous brand data intact, it does not fu ...

javascriptreactjsarraysreact-nativezustand

Unable to execute the action specified in the store sub-file

In my /store/index.js file, I have the following code: import Vue from "vue"; import Vuex from "vuex"; import auth from "./modules/auth"; Then in /store/modules/auth.js, I define the login action like this: export const actions = { login({ commit, dis ...

vue.jsvuex

Utilizing ReactJS and TypeScript to retrieve a random value from an array

I have created a project similar to a "ToDo" list, but instead of tasks, it's a list of names. I can input a name and add it to the array, as well as delete each item. Now, I want to implement a button that randomly selects one of the names in the ar ...

javascriptarraysreactjstypescript

Executing JavaScript code from an external link

Currently, I am in the process of developing a horizontal parallax website. The functionality is working seamlessly; when I click on the menu, the slides smoothly transition horizontally and display the corresponding content. However, I have encountered a ...

javascriptjqueryhtmlparallaxhorizontal-scrolling

Iterating over an object in a React component

i'm trying to generate an object using iteration like this: opts = [{label:1, value:1}, {label:4, value:4}] the values for this object are coming from an array portArray = [1,4] I'm attempting to do const portArray = [1,4]; return { ...

javascriptreactjsobjectiteration

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

How can I achieve a layout like this? Essentially, I have 2 containers in flexbox: The first one with text "33" The second one is a grid container: The first element in the grid is "EUR" The second element in the grid is ".49" Based on this descript ...

htmlcssfont-sizeline-height

Guide to embedding a qr code within a pdf document

I've been working on creating a PDF file generation feature where users can download the PDF with a QR code embedded in it. While I've successfully implemented the PDF generation part, I'm facing an issue with adding the QR code to the file. ...

javascriptreactjspdfqr-code

Tips for removing markers from personal Google Maps

I am having trouble deleting markers from my Google Maps using my code. The markers array seems to be empty even after adding markers. Can anyone help me troubleshoot this? Thank you! When I use console.log(markers.length) in the removeMarkers() function, ...

javascriptjqueryajax

Utilizing the JavaScript Array.find() method to ensure accurate arithmetic calculations within an array of objects

I have a simple commission calculation method that I need help with. I am trying to use the Array.find method to return the calculated result from the percents array. The issue arises when I input a price of 30, as it calculates based on the previous objec ...

javascripttypescript

Convert the numerical values from an array into an input field format

Currently, I have two inputs and an array with two number positions. The v-model in each input corresponds to a value in the array. Whenever a change is made in either input field, it reflects on the corresponding position in the array, which works perfect ...

javascriptvue.jsvuejs3vue-composition-api

"Encountered a Chrome RangeError: The call stack size limit was exceeded while utilizing jQuery's $

As part of my job, I am currently evaluating a web application that involves fetching a substantial amount of data from the server. The data is received as a JSON object using the $.ajax function. It contains numerous sub-objects which I convert into array ...

javascriptjquerygoogle-chromeweb-applicationsbrowser