Vuetify 输入自动完成错误答案

【问题标题】：Vuetify input autocomplete bugVuetify 输入自动完成错误
【发布时间】：2020-02-11 00:07:55
【问题描述】：

我尝试了几次谷歌但没有运气，基本上，当页面加载时，因为密码是自动保存的，v-text-field 不理解它并在标签前面呈现密码内容，是否有任何解决方法或解决方法？这是一个ss：

登录组件：

  <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>

我使用登录组件的地方：

    <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>

【问题讨论】：

请贴出你的相关代码sn-ps，不只是图片。

标签： vue.js vuetify.js

【解决方案1】：

2021 年 6 月 4 日更新。在 Vuetify 2.5.3 和 Google Chrome 90 上测试：

您仍然可以将 placeholder 属性与一个空格结合使用 persistent-placeholder 属性。

...
<v-text-field
  label="Login"
  v-model="loginItem.login"
  placeholder=" "
  persistent-placeholder
  :rules="rules.login"
/>

旧答案。此解决方案从 vuetify 2.4.0 开始停止工作（感谢@saike 提供信息）：

作为一种简单的解决方法，您可以添加 placeholder 道具和一个空格：

...
<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>
...

这就是登录名/密码保存在浏览器中时的样子（在我的例子中是 Google Chrome 80）：

并且带有空值：

【讨论】：

绝对天才！
很遗憾不能在"vuetify": "^2.4.0" 中工作，我在mounted 钩子中使用this.$refs.EmailField.focus()
感谢@saike 提供的信息。不幸的是，在最新的 vuetify 2.5.3 中调用 mounted 钩子中的 focus 方法会导致只有调用它的字段正确显示，而其他字段仍然重叠的情况。我已经用更正确的问题解决方案更新了我的答案
很好，如果里面没有任何东西，无论如何要降低标签的负载？
@Zaffer，不，还没有:(

【解决方案2】：

对我有用的解决方案是生成一个随机的name 属性。在我的解决方案中，我使用了 uuid v4 方法。如果您依赖名称，那么显然这可能对您不起作用，除非您保留名称映射 -> v4 输出。

import { v4 } from 'uuid'

<v-text-field
    v-model="card"
    class="card-input"
    outlined
    :name="v4()"
    label="Credit Card Number"
    :rules="creditCardNumberRules"
    v-mask="[' ####  ####  ####  ####', ' ####  ####  #####  ###']"
/>

【讨论】：