Vuetify文本字段标签对齐

Question

我正在为网络应用程序构建一个简单的注册页面。我正在使用vuetify组件来构建页面。我有两个用于输入用户名和密码的文本字段。文本字段的标签显示在文本字段的右侧。知道如何使标签显示在文本字段的左侧

我尝试添加自定义css这样的类来覆盖对齐方式，但是我无法获得预期的结果。这是没有自定义类的HTML：

<template>
  <v-container>
    <v-card>
      <v-toolbar flat dense class="black" dark>
        <v-toolbar-title>Register</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <v-text-field
          type="email"
          name="email"
          label="email"
          class="left-align"
          v-model="email"/>
        <v-text-field
          type="password"
          name="password"
          label="password"
          class="left-align"
          v-model="password"/>
        <br>
        <div class="error" v-html="error"/>
      </v-card-text>
      <v-card-actions>
          <v-btn class = "black" v-on:click="register" >Register</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

Answer 1

尝试使用reverse道具

<v-text-field
reverse
type="email"
name="email"
label="email"
class="left-align"
v-model="email"/>

Answer 2

在以前使用Vuetify 1的应用程序中切换到Vuetify 2时，请确保Vuetify已正确安装在您的应用程序中。在您的项目中添加以下文件：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

然后在main.js文件中，将vuetify对象传递给您的Vue应用程序：

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

访问Vuetify快速入门文档以获取更多信息