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

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/>'
})

路由器工作正常，组件的模板已注入。控制台没有错误，检查员显示模板：

<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

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

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

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

它将从 Vuetify 导入所有内容。

A la carte - Vuetify Documentation

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

vuetify.js: v-form-textfield loaded with vue-router not visible

vue.js

vuetify.js