How to disable autocomplete with v-form

Question

I want to disable chrome autocomplete in my v-form. How do I do that? I don't see a autocomplete property on the v-form.

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

While it is a property on a normal html form

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

Answer 1

By setting autocomplete="username" and autocomplete="new-password" on v-text-field you can actually turn off the autocomplete in chrome.

here is a code that worked for me:

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

Edit: autocomplete isn't set as a prop in vuetify docs but if you pass something to a component which isn't defined as prop in that component, it will accept it as an attribute and you can access it through $attrs.

here is the result of the above code in vue dev tools:

and here is the rendered html:

Answer 2

I wasn't able to get autofill disabled with the above methods, but changing the name to a random string/number worked.

name:"Math.random()"

https://github.com/vuetifyjs/vuetify/issues/2792

Answer 3

use autocomplete="off" in <v-text-field

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