Vue材料md输入与示例不同

时间:2018-05-03 04:12:10

标签: vue.js vue-material

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

id

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

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

Vue.use(VueMaterial)

我的页面显示:

enter image description here

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

enter image description here

我的代码有什么问题?

2 个答案:

答案 0 :(得分:1)

这件事也发生在我身上

要解决此问题,您只需要为应用设置一个主题,如下所示:

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

答案 1 :(得分:0)

您可能错过了一个重要的<form>代码

根据documentation,为您的用例删除一些内容,您应该至少包含以下<md-field>个标记。

<form class="md-layout">
  // your form inputs here
</form>