Vuetify密码与v文本字段标签重叠

Question

我正在用Vuetify和Firebase制作一个日志组件。我希望pasword被隐藏，但通过将类型“pasword”添加到v-text-field，它将添加4个点，重叠pasword字段的标签，并将单词“admin”重叠到电子邮件字段：

当我点击任何字段时，我可以在$data pre中看到“admin”同时分配给pasword和email。我尝试将“占位符”和“值”属性设置为空字符串，但不起作用。在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>

Answer 1

我在这里找到了bug讨论和解决方法（来自@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');
    ...
}

登录。html。雇员再培训局

<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”生成为输入-1以外的内容

Answer 2

我认为这与你的代码无关，你在使用Chrome，对吗？谷歌做了一些很难控制的奇怪事情，这是因为你有一个保存的用户名和密码，而vuetify使用标签作为占位符，谷歌保存的表单样式与你的“崩溃”了，在保存的表单下拉列表的行颜色中，我遇到了这种情况，而现在（仅在1台计算机中），用户名和密码的字体大小在v-text-field中变小，直到您单击它为止