Vue Material md-input отличается от примера

Я хочу использовать vue-материал для своего приложения, я уже устанавливаю vue-material в свое приложение и делаю это в своем main.js:

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

Vue.use(VueMaterial)

но когда я использую какой-то компонент из vue-материала на моей индексной странице, например:

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

моя страница показывает:

введите здесь описание изображения

когда я захожу в пример ввода формы в коде, ввод формы должен выглядеть так:

введите здесь описание изображения

что не так с моим кодом?


vue.js vue-material
person Jehan Ramadhan    schedule 03.05.2018    source источник
comment
Можете ли вы создать jsfiddle?   -  person Nafiul Islam    schedule 03.05.2018

Ответы (2)


arrow_upward
6
arrow_downward

Это случилось и со мной,

Чтобы исправить это, вам просто нужно установить тему для своего приложения следующим образом:

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

person Caio Micheletto    schedule 30.07.2018
comment
Кайо, не могли бы вы взглянуть на еще один вопрос о vue-материалах? stackoverflow .com / questions / 59952741 / - person JS_is_awesome18; 28.01.2020

arrow_upward
0
arrow_downward

Вероятно, вам не хватает важного тега <form>

В соответствии с документацией, удалив некоторые вещи для вашего варианта использования, у вас должно быть как минимум следующее: эти <md-field> теги.

<form class="md-layout">
  // your form inputs here
</form>
person Ru Chern Chong    schedule 03.05.2018