Vuetify 评级组件未呈现

Posted 2023-02-22

【中文标题】Vuetify 评级组件未呈现

【英文标题】：Vuetify rating component is not rendering

【发布时间】：2019-07-28 22:36:18

【问题描述】：

我正在尝试在我的应用程序中使用 Vuetify 评级组件 (https://vuetifyjs.com/en/components/ratings#ratings)。我安装了 Vuetify 1.5.5，按钮等其他组件工作正常。在这个评级中，没有渲染星星，只有文字。

关于如何解决此问题的任何想法？我在网上没有找到任何相关的帖子。如果有人可以推荐任何其他稳定的 vue 评级组件，那也可以。

这是我使用评级的组件：

 <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>

我的 main.js 文件有 vuetify css 导入：

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

我还附上了渲染的屏幕截图。

Screenshot of rendered rating component, no stars

【问题讨论】：

您是否在脚本的data 部分定义了rating，即v-model？

请添加您的脚本代码或至少数据属性。

【参考方案1】：

看来您可能没有使用 Material Icons 库。 https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons

当我从 Codepen 中删除它时，我能够重现该错误。

【讨论】：

谢谢@excessjudgement。这解决了这个问题。干杯伙伴！