Is it possible to mask the "password" information in the data table?

Question

I would like have my data table mask the "Password" entries (both in the table and in the dialog). This page is supposed to be an admin control panel for account management. I checked the documentation and can't figure out how to do it.

I tried using "mask" for text-fields, but to no avail.

<template>
<v-app>
  <v-content>
  <div>
    <v-toolbar flat color="white">
      <v-toolbar-title>Accounts:</v-toolbar-title>
      <v-spacer></v-spacer>
       <v-flex md4 mt-3>
          <v-text-field browser-autocomplete height="20px" full-width class="mx-3" flat label="Search" prepend-inner-icon="search" outline></v-text-field>
        </v-flex>

      <v-dialog v-model="dialog" max-width="500px">
        <template v-slot:activator="{ on }">
          <v-btn color="success" dark class="mb-2" v-on="on">Add Account</v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-container grid-list-xs>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.orgname" label="Organization Name"></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.orgusername" label="Organization Username"></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.password" label="Password"></v-text-field>
                </v-flex>
              </v-layout>

            </v-container>

          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
            <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-toolbar>

    <v-data-table  :headers="headers"  :items="orgname" class="elevation-1">
      <template v-slot:items="props">
        <td>{{ props.item.orgname }}</td>
        <td class="text-xs-left">{{ props.item.orgusername }}</td>
        <td class="text-xs-left">{{ props.item.password }}</td>

        <td class="justify-center layout px-0">
          <v-icon small class="mr-2"  @click="editItem(props.item)">
            edit
          </v-icon>
          <v-icon small @click="deleteItem(props.item)" >
            delete
          </v-icon>
        </td>
      </template>

    </v-data-table>
  </div>
  </v-content>
</v-app>
</template>

The script

<script>
export default{
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'Organization Name',
          align: 'left',
          sortable: true,
          value: 'orgname'
        },
        { text: 'Organization Username', value: 'orgusername' , sortable: false},
        { text: 'Organization Password', value: 'password', sortable: false },

      ],
        orgname: [],
      editedIndex: -1,
      editedItem: {
        orgname: '',
        orgemail: '',
        password: ''
      },
      defaultItem: {
        orgname: '',
        orgemail: '',
        password: ''
      }
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'Add Account' : 'Edit Info'
      }
    },

    watch: {
      dialog (val) {
        val || this.close()
      }
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.orgname = [
          {
            orgname: 'Student Organization',
            orgusername:'studorganization',
            password: 'studorganization'
          }

        ]
      },

      editItem (item) {
        this.editedIndex = this.orgname.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        const index = this.orgname.indexOf(item)
        confirm('Are you sure you want to delete this?') && this.orgname.splice(index, 1)
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.orgname[this.editedIndex], this.editedItem)
        } else {
          this.orgname.push(this.editedItem)
        }
        this.close()
      }
    }
  }
</script>

I expected it to be masked with asterisks (*), but I don't know how. (it's currently in plain text).

Answer 1

You can use type="password" in v-text-field

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

If you want toggle password visibility on/off, you can add append-icon and a data attribute:

data() {
  return {
    showPassword: false
  }
}

<v-text-field 
  v-model="editedItem.password" label="Password"
  :type="showPassword ? 'text' : 'password'"
  :append-icon="showPassword ? 'visibility' : 'visibility_off'"
  @click:append="showPassword = !showPassword"
  type="password">
</v-text-field>

In data table, if you want to hide password, just replace it with some dummy text. Change

 <td class="text-xs-left">{{ props.item.password }}</td>

to

 <td class="text-xs-left">********</td>

You can check password example in Vuetify document