Reputation: 3489

How to disable autocomplete with v-form

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

Upvotes: 6

Answers (8)

pvel36

Reputation: 21

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

Upvotes: 1

Raihanul Alam Hridoy

Reputation: 561

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>

Upvotes: 0

Raioneru

Reputation: 151

autocomplete="null"

This one prevents Chrome autofill feature

Upvotes: 3

Anandhan Sreekumar

Reputation: 51

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

Upvotes: -1

eDiKay

Reputation: 67

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

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

Upvotes: 5

Justin C.

Reputation: 382

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

Upvotes: 3

Aymane Shuichi

Reputation: 458

Just add:

autocomplete="false"

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

Upvotes: 1

hamid niakan

Reputation: 2851

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:

Upvotes: 8

How to disable autocomplete with v-form

Answers (8)

Related Questions