1

我想为我的应用程序使用 vue 材料,我已经在我的应用程序中安装了 vue-material,并在我的 main.js 中执行此操作:

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

但是,当我在我的索引页面中使用 vue-material 中的某些组件时,如下所示:

<template>
   <md-field>
    <label>Username</label>
    <md-input v-model="username"></md-input>
   </md-field>
   <md-field>
    <label>Password</label>
    <md-input v-model="password"></md-input>
   </md-field>
</template>

我的页面显示:

在此处输入图像描述

当我访问 codepen 中的示例表单输入时,表单输入应该是这样的:

在此处输入图像描述

我的代码有什么问题?

4

2 回答 2

6

这也发生在我身上,

要修复它,您只需为您的应用设置一个主题,如下所示:

import 'vue-material/dist/theme/default.css'

于 2018-07-30T01:22:33.207 回答
0

你可能错过了一个重要的<form>标签

根据文档,为您的用例删除一些东西,您应该至少在这些<md-field>标签周围有以下内容。

<form class="md-layout">
  // your form inputs here
</form>
于 2018-05-03T05:24:57.233 回答