2016-07-22 04:45:15 +00:00
|
|
|
<template>
|
|
|
|
|
<section>
|
2016-07-26 05:48:31 +00:00
|
|
|
<md-input-container>
|
|
|
|
|
<label>Username</label>
|
|
|
|
|
<input type="password" v-model="test" id="password">
|
|
|
|
|
</md-input-container>
|
|
|
|
|
|
|
|
|
|
<md-button class="md-icon-button" @click="togglePassword">
|
|
|
|
|
<md-icon>visibility</md-icon>
|
|
|
|
|
</md-button>
|
|
|
|
|
|
|
|
|
|
{{ test }}
|
2016-07-22 04:45:15 +00:00
|
|
|
</section>
|
|
|
|
|
</template>
|
2016-07-26 05:48:31 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
methods: {
|
|
|
|
|
togglePassword() {
|
|
|
|
|
let passwordField = document.querySelector('#password');
|
|
|
|
|
let type = passwordField.type;
|
|
|
|
|
|
|
|
|
|
if (type === 'password') {
|
|
|
|
|
passwordField.type = 'text';
|
|
|
|
|
} else {
|
|
|
|
|
passwordField.type = 'password';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|