Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 398
Bussiere Avatar asked Dec 15 '17 12:12

Bussiere


People also ask

How do I toggle visibility password in Vue?

Type in the password field and press the eye icon to show or hide the password.

How do you delete a text field in Vuetify?

You can use the @click:clear="()" so you can clear your text at the same time it will call the function.

How do I change the text color in Vuetify?

Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text .


2 Answers

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.

like image 161
samayo Avatar answered Oct 30 '22 10:10

samayo


<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.

like image 26
Sándor Bakos Avatar answered Oct 30 '22 12:10

Sándor Bakos