我正在使用Vuetify和Firebase制作日志记录组件。我希望隐藏密码,但是通过在v-text-field
中添加类型“密码”,它会在密码字段的标签上添加4个点,而在电子邮件字段上添加单词“ admin”:
当我单击任何字段时,可以在$ data之前看到将“ admin”分配给密码和电子邮件。我试图将“占位符”和“值”属性设置为空字符串,但不起作用。在vuetify文档中,我看不到任何将'admin'分配给v-text-field的道具。 我该如何解决这个问题? 这是我的组件代码:
<template>
<v-form>
<v-container>
<v-text-field
label="E-mail"
v-model="email"
>
</v-text-field>
<v-text-field
label="Pasword"
v-model="password"
type="password"
placeholder=""
>
</v-text-field>
<v-btn
color="blue"
@click="login()"
>Submit
</v-btn>
</v-container>
<pre>
{{ $data}}
</pre>
</v-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 conected'), error => console.log(error))
}
}
}
</script>
答案 0 :(得分:0)
我认为这与您的代码无关,您使用的是Chrome,对吗? Google做了一些奇怪的事情,这些事情真的很难控制,这是因为您拥有一个保存的用户名和密码,并且当vuetify使用标签作为占位符时,Google的保存表单样式与您的样式“崩溃”,我在行中就碰到了现在(仅在一台计算机上)的已保存表单下拉菜单的颜色,直到您单击该用户名和密码的字体大小才会在v文本字段内减小
答案 1 :(得分:0)
我在这里找到了错误讨论和解决方法(来自@185driver): https://github.com/vuetifyjs/vuetify/issues/3679 建议的代码对我来说不一致
我仍在寻找更好的解决方案,但在此期间我发现将标签设置为活动至少可以阻止重叠。在还没有数据的表单上,标签在它应该被接合之前被接合,但表单看起来比重叠文本更好。
login_vue.js
mounted() {
$("label\[for=\'username\'\]").addClass('v-label--active');
$("label\[for=\'password\'\]").addClass('v-label--active');
...
}
login.html.erb
<v-row>
<v-col cols="5"></v-col>
<v-col cols="2">
<v-text-field id="username" v-model="email" name="email" label="Username" ></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="5"></v-col>
<v-col cols="2">
<v-text-field id="password" v-model="password" :type="'password'" name="password" label="Password" ></v-text-field>
</v-col>
</v-row>
注意:输入必须有 id 才能生成标签“for”而不是 input-1