Question

我使用Vuetify for Vuejs项目。我将v-text-field元素添加到具有轮廓属性的v-form中，但不显示边框。谢谢。

代码将Vuetify添加到main.js中的项目：

import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify, {
    iconfont: 'md',
});

以注册表形式使用：

<v-form @submit.prevent="handleRegister" id="register-form" data-vv-scope="register-form">
    <v-text-field outlined v-model="user.email" v-validate="'required|email'"
        name="email" :error-messages="errors.collect('register-form.email')" 
        label="メールアドレス"
        :class="{ 'is-invalid': submitted && errors.has('register-form.email')}">
    </v-text-field>
    <v-text-field v-model="user.password" v-validate="'required|min:8|max:20'"
        :error-messages="errors.collect('register-form.password')"
        :type="'password'" single-line outlined name="password"
        label="パスワード"
        :class="{ 'is-invalid': submitted && errors.has('register-form.password') }"
    ></v-text-field>
    <v-text-field v-model="user.password_confirmation"
         v-validate="'required|min:8|max:20'"
         :error-messages="errors.collect('register-form.password_confirmation')"
         label="パスワード確認" name="password_confirmation"
         single-line outlined :type="'password'"
         :class="{ 'is-invalid': submitted && errors.has('register-form.password_confirmation') }"
    ></v-text-field>
    <v-text-field v-model="user.user_id" v-validate="'required|min:4|max:20'"
         :error-messages="errors.collect('register-form.user_id')"
         single-line outlined label="ユーザID" name="user_id"
         :class="{ 'is-invalid': submitted && errors.has('register-form.user_id') }"
    ></v-text-field>
</v-form>

Answer 1

您使用1.5.5 vuetify版本。您应该尝试使用 outline 属性而不是 outlined 。他们在v 2.0中进行了更改，我认为您已经阅读了v2文档。

Vuetify：带有轮廓的v文本字段不显示边框

1 个答案: