如何使用 v-form 禁用自动完成功能

Question

我想在我的 v 表单中禁用 chrome 自动完成功能。我怎么做？我在 v 表单上没有看到自动完成属性。

https://next.vuetifyjs.com/en/api/v-form/

虽然它是普通 html 表单上的属性

https://www.w3schools.com/tags/att_form_autocomplete.asp

Answer 1

通过在 v-text-field 上设置autocomplete="username"和 ，autocomplete="new-password"您实际上可以关闭 chrome 中的自动完成功能。

这是一个对我有用的代码：

       <v-form lazy-validation ref="login" v-model="validForm" @submit.prevent="submit()">
            <v-text-field
              v-model="user.email"
              label="Email"
              autocomplete="username"
            />
            <v-text-field
              v-model="user.password"
              label="Password"
              type="password"
              autocomplete="new-password"
            />
            <v-btn type="submit" />
        </v-form>

编辑：自动完成未在 vuetify 文档中设置为 prop，但是如果您将某些内容传递给未在该组件中定义为 prop 的组件，它将接受它作为属性，并且您可以通过$attrs.

以下是上述代码在 vue 开发工具中的结果：

这是渲染的 html：

Answer 2

在 <v-text-field 中使用 autocomplete="off"

<v-text-field
   autocomplete="off"
/>