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:
![enter image description here](https://i.stack.imgur.com/RtemT.png)
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…