I'm currently working on a logging feature using Vuetify and Firebase. My goal is to hide the password input field but when I set the type as 'password' for the v-text-field, it causes 4 dots to overlap with the label of the password field and the word 'admin' to appear over the email field:
https://i.sstatic.net/3jfUM.jpg
Upon clicking any field, the $data pre shows that "admin" is being assigned to both password and email fields. I've attempted setting the 'placeholder' and 'value' properties to empty strings but have had no success. In the Vuetify documentation, I couldn't find any property that would assign 'admin' to the v-text-field. How can I resolve this issue? Below is my current component code:
<template>
<v-form>
<v-container>
<v-text-field
label="E-mail"
v-model="email"
>
</v-text-field>
<v-text-field
label="Password"
v-model="password"
type="password"
placeholder=""
>
</v-text-field>
<v-btn
color="blue"
@click="login()"
>Submit
</v-btn>
</container>
<pre>
{{ $data}}
</pre>
</form>
</template>
<script>
import firebase from 'firebase'
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login(){
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(user => console.log('User connected'), error => console.log(error))
}
}
}
</script>