Question

我正在玩vuetify.js并遇到问题。

我创建了一个组件（在Login.vue中登录），但它没有显示任何文本字段。所以我尝试了其中一个文档示例：

<template>
  <v-form v-model="valid">
    <v-text-field
      v-model="name"
      :rules="nameRules"
      :counter="10"
      label="Name"
      required
    ></v-text-field>
    <v-text-field
      v-model="email"
      :rules="emailRules"
      label="E-mail"
      required
    ></v-text-field>
  </v-form>
</template>

export default {
    data: () => ({
      valid: false,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => v.length <= 10 || 'Name must be less than 10 characters'
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
      ]
    })
  }

我使用webpacker创建最终的.js和.css文件。 vue-router默认包含在内，还有其他一些东西。 main.js：

import App from './App'
import router from './router'
import Vuex from 'vuex'
import {
  Vuetify,
  VApp,
  VNavigationDrawer,
  VFooter,
  VList,
  VBtn,
  VIcon,
  VGrid,
  VToolbar,
  VForm,
  transitions
} from 'vuetify'
import '../node_modules/vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    VForm,
    transitions
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  }
})

Vue.use(Vuex);

/* eslint-disable no-new */
var vapp = new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

路由器工作正常，并注入了Component的模板。控制台中没有错误，检查员显示模板：

<form novalidate="novalidate"><v-text-field counter="10" label="Name" required=""></v-text-field> <v-text-field label="E-mail" required=""></v-text-field></form>

但元素似乎高度为18px，宽度为0px。即使我改变宽度，我也看不到任何东西，也无法将光标放在里面。

任何人都知道这里发生了什么？我首先想到包装app.css可能有问题 - 但包括默认的vuetify.css并没有解决任何问题

Answer 1

您必须从VTextField中的vuetify导入main.js并将其添加到components部分。

修改：如果您不需要A la carte组件，并且您的应用程序大小无关紧要：

import Vuetify from 'vuetify' 
Vue.use(Vuetify)

它将从Vuetify导入所有内容。

A la carte - Vuetify Documentation

vuetify.js：加载了vue-router的v-form-textfield不可见

1 个答案: