Vuetify: [Feature Request] Add password reveal to VTextField

Created on 4 May 2018  路  3Comments  路  Source: vuetifyjs/vuetify

Problem to solve

Adds a built-in way to achieve password reveal in vuetify, without having to declare a variable for every password field.

Proposed solution

Link to our solution gist

feature wontfix

Most helpful comment

I think this is just a "nice to have" that would either be too complex to integrate into v-text-field, or too simple to justify a separate component. You can very easily do this yourself. Thank you for the suggestion though.

<template>
  <v-text-field
    v-bind="$attrs"
    v-on="$listeners"
    :append-icon="visible ? 'visibility_off' : 'visibility'"
    :append-icon-cb="() => (visible = !visible)"
    :type="visible ? 'text' : 'password'"
  />
</template>

<script>
  export default {
    data: () => ({
      visible: false
    })
  }
</script>

All 3 comments

I think it would be better if you allow props to change the icons.

<v-password-field v-model="password" label="Password" :icons="['fas fa-eye', 'fas fa-eye-slash']" />

Yes my proposed solution was somewhat unclear.
This was the solution we momently used to solve this problem in our application.
It could be cool to add a props that enables this feature directly into v-text-field, but that's just my opinion.

Thanks for the help

I think this is just a "nice to have" that would either be too complex to integrate into v-text-field, or too simple to justify a separate component. You can very easily do this yourself. Thank you for the suggestion though.

<template>
  <v-text-field
    v-bind="$attrs"
    v-on="$listeners"
    :append-icon="visible ? 'visibility_off' : 'visibility'"
    :append-icon-cb="() => (visible = !visible)"
    :type="visible ? 'text' : 'password'"
  />
</template>

<script>
  export default {
    data: () => ({
      visible: false
    })
  }
</script>
Was this page helpful?
0 / 5 - 0 ratings