DEV Community

loading...

How to append an icon to show/hide password with vuetify

Judith ☁ Oiku
Full stack web developer - vueJs & Laravel
・1 min read

template

<v-text-field
  id="password"
  name="password"
  label="password" 
  :type="show ?'text': 
  'password'"
  :append-icon="show ?'mdi-eye':'mdi-eye-off'"   
  @click:append="show=!show">
</v-text-field>
Enter fullscreen mode Exit fullscreen mode

script

<script>
export default {
  data() {
    return {
       show:false
          }
       }
     }
</script>
Enter fullscreen mode Exit fullscreen mode

For further reading , check out the vuetify documentation

Discussion (0)

Forem Open with the Forem app