CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Bussiere
Bussiere

Reputation: 1152

Making password characters hidden in Vuetify field

So here is my password field in vuetify : 

<v-text-field
  label="Password"
  v-model="password"
  required
></v-text-field>

But when i enter text it's in clear and not *****

How to make a vuetify password textfield so when a user type it will show only ***** and not what the user is typing.

regards and thanks

Upvotes: 16

Views: 26378

Answers (4)

Manuchehr
Manuchehr

Reputation: 81

Here is with implemented version:

<template>
  <v-text-field
    v-bind="$attrs"
    :type="showPassword ? 'text' : 'password'"
    :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
    @click:append-inner="showPassword = !showPassword"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";

const showPassword = ref(false);
</script>

Upvotes: 2

samayo
samayo

Reputation: 16495

Add the type="password" to your input component.

<v-text-field type="password"> </v-text-field>

You can check the Vuetify Documentation for password field properties.

Upvotes: 28

d33j
d33j

Reputation: 434

Had the same problem as OP and got it to work by using the following (using Vuetify v2.1.0)

<v-text-field v-model="form.password" label="Password" type="password"></v-text-field>

Upvotes: 1

S&#225;ndor Bakos
S&#225;ndor Bakos

Reputation: 503

<v-text-field type="password"></v-text-field>

I tried the accepted answer, but it did not work for me. Do not bind the type property. Use as a regular input password field.

Upvotes: 9

Related Questions