How to disable autocomplete with v-form

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:

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

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

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

Just add:

autocomplete="false"

to your <v-text-field> or any input

autocomplete="null"

This one prevents Chrome autofill feature

I have not been able to get any of the previous proposals to work for me, what I finally did is change the text-flied for a text-area of a single line and thus it no longer autocompletes

Try passing the type='search' and autocomplete="off" props.

I also ran into a similar problem. Nothing worked until I found this wonderful Blog "How to prevent Chrome from auto-filling on Vue?" by İbrahim Turan

The main catch is that we will change the type of v-text-field on runtime. From the below code you can see that the type of password field is assigned from the value fieldTypes.password. Based on focus and blur events we assign the type of the field. Also, the name attribute is important as we decide based on that in the handleType() function.

I'm also pasting the solution here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">
    <div v-if="isloggedin" class="welcome">
      Welcome {{username}}
    </div>
    <div v-else id="form-wrapper">
      <label for="username">Username: </label>
      <input
        v-model="username" 
        class="form-input" 
        type="text" 
        name="username" 
        value=""
        autocomplete="off"
      />
      <label for="password">Password: </label>
      <input 
        v-model="password"
        class="form-input"
        :type="fieldTypes.password"
        name="password"
        value=""
        @focus="handleType"
        @blur="handleType"
        autocomplete="off"
      />
      <button class="block" type="button" @click="saveCredentials">
        Submit Form
      </button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      username: '',
      password: '',
      isloggedin: false,
      fieldTypes: {
        password: 'text',
      }
    }
  },
  methods: {
    saveCredentials() {
      this.isloggedin = true;
    },
    handleType(event) {
      const { srcElement, type } = event;
      const { name, value } = srcElement;

      if(type === 'blur' && !value) {
        this.fieldTypes[name] = 'text'
      } else {
        this.fieldTypes[name] = 'password'
      }
    }
  }
}
</script>