错误地显示来自 Vuetify 的复选框组件

Wrongly displaying of checkbox component from Vuetify

在简单的形式中,Vuetify 中的复选框显示为原始文本:

<v-form class="form-login" v-model="valid" ref="form" lazy-validation>
      <v-text-field label="Login"
                    v-model="username"
      ></v-text-field>
      <v-text-field label="Password"
                    type="password"
                    v-model="password"
      ></v-text-field>
      <v-checkbox
                  v-model="checkbox"
      ></v-checkbox>
</v-form>

如果我不使用组件,而是使用自己的复选框,它就可以正常工作:

      <input type="checkbox" v-model="rememberMe"/>

你知道我做错了什么吗?

您似乎没有正确加载 vuetify css。简单地将 vuetify 依赖项添加到 package.json 将不会加载样式。

加载 css (as documented here) 的最简单方法是将其添加到 index.html 文件的 <head> 部分:

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>