Vuetify 输入自动完成错误 [英] Vuetify input autocomplete bug
问题描述
我试图用谷歌搜索它几次但没有运气,基本上,当页面加载时,因为密码处于自动保存状态,v-text-field 不理解它并在标签前面呈现密码内容,是否有任何解决方法或修复方法?这是一个ss:
登录组件:
<模板><div><v-card class="elevation-12"><v-toolbar color="primary";暗平面><v-toolbar-title>登录</v-toolbar-title></v-工具栏><v-card-text><v型><v-文本字段标签=电子邮件"名称=电子邮件"类型=文本":rules="emailRules";:autofocus="'自动对焦'";></v-text-field><v-文本字段id="密码"标签=森哈"名称=密码"类型=密码"></v-text-field></v-form></v-card-text><v-card-actions><v-间隔></v-间隔><v-btn color="primary";块>对数</v-btn></v-card-actions></v-card>
</模板><脚本>导出默认{名称:登录表单",数据:() =>({有效:真实,电子邮件: '',密码:'',电子邮件规则:[v =>!! v ||'数字嗯电子邮件',v =>/.+@.+\..+/.test(v) ||'O 电子邮件 precisa ser válido.',]})}<style lang="scss">@import "LoginForm.scss";</风格>
我使用登录组件的地方:
<模板><v-内容><v-容器流体填充高度><v-layout align-center justify-center><v-flex xs12 sm8 md4><登录表单></登录表单></v-flex></v-layout></v-容器></v-content></模板><脚本>从../components/login/LoginForm"导入登录表单;从'~/components/Logo.vue'导入徽标从 '~/components/VuetifyLogo.vue' 导入 VuetifyLogo导出默认{name: '索引',成分: {登录表格,标识,VuetifyLogo},数据:() =>({}),}
2021 年 6 月 4 日更新.在 Vuetify 2.5.3 和 Google Chrome 90 上测试:
您仍然可以将 placeholder 道具与 persistent-placeholder 道具结合使用,其中一个空格.
<代码>...<v-文本字段标签=登录"v-model="loginItem.login";占位符=""持久占位符:rules="rules.login";/>
旧答案.此解决方案从 vuetify 2.4.0 开始停止工作(感谢
并且带有空值:
I tried to google it a couple of times but got no luck, basically, when the page loads since the password is on autosave the v-text-field doesn't understand it and renders the passaword content in front of the label, is there any workaround or fix for that? Here is a ss:
The login component:
<template>
<div>
<v-card class="elevation-12">
<v-toolbar color="primary" dark flat>
<v-toolbar-title>Login</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="E-mail"
name="email"
type="text"
:rules="emailRules"
:autofocus="'autofocus'"
></v-text-field>
<v-text-field
id="password"
label="Senha"
name="password"
type="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" block>Logar</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
name: "LoginForm",
data: () => ({
valid: true,
email: '',
password:'',
emailRules: [
v => !!v || 'Digite um e-mail',
v => /.+@.+\..+/.test(v) || 'O e-mail precisa ser válido.',
]
})
}
</script>
<style lang="scss">
@import "LoginForm.scss";
</style>
The place where I use the login component:
<template>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<LoginForm></LoginForm>
</v-flex>
</v-layout>
</v-container>
</v-content>
</template>
<script>
import LoginForm from "../components/login/LoginForm";
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
export default {
name: 'Index',
components: {
LoginForm,
Logo,
VuetifyLogo
},
data: () => ({
}),
}
</script>
Update June 4, 2021. Tested on Vuetify 2.5.3 and Google Chrome 90:
You can still use placeholder prop with one space in combination with persistent-placeholder prop.
...
<v-text-field
label="Login"
v-model="loginItem.login"
placeholder=" "
persistent-placeholder
:rules="rules.login"
/>
Old answer. This solution stopped working starting from vuetify 2.4.0 (thanks @saike for the info):
As a simple workaround you could add placeholder prop with one space:
...
<v-text-field
label="Login"
v-model="loginItem.login"
placeholder=" "
:rules="rules.login"
></v-text-field>
...
<v-text-field
label="Password"
placeholder=" "
v-model="loginItem.password"
type="password"
:rules="rules.password"
></v-text-field>
...
That's how it looks like when login/password was saved in your browser (in my case it's Google Chrome 80):
And with empty values:
这篇关于Vuetify 输入自动完成错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!