Question

以简单的形式，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"/>

你知道我做错了什么吗？

Answer 1

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

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

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

从Vuetify错误地显示复选框组件

1 个答案: