Компонент для ввода пароля, который не будет сохранен в Chrome

gistfile1.txt

// в некоторых случаях автосохранение и автоподстановка пароля в гугл хром может быть большой проблемой
// данный компонент позволяет сделать окно авторизации таким, что секюрность ввода пароля будет соблюдена
// и хром не распознает ввод пароля и, соответственно, не будет предлагать его сохранить или использовать
// сохраненный пароль
// использование комплнента очень простое
// в шаблоне <login-pawwsord v-model="mypassword">
// в кодовой части
// components:{
//      LoginPassword:()=>import('./login-password')
// }
// естественно, нижеследующий код надо сохранить в login-password.vue


<template>
    <div class="logpass">
        <input type="hidden" v-model="opass">
        <label :for="inpid">Пароль</label>
        <input style="width: 100%"
               :id="inpid"
               type="text"
               v-model="ipass"
               @input="input"
               @keydown="keyDown"
               @focus="focus"
               @blur="blur"
               @keydown.enter="$emit('keydown_enter',$event)">
    </div>
</template>

<script>
    export default {
        name: "login-password",
        data() {
            return {
                ipass:'', // input password
                opass:'', // output password
            }
        },
        computed: {
            inpid(){
                let length=7
                let result
                let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
                let el=''
                while(el!==null){ // void to duplicate id if node with same id exists
                    result=letters.charAt(Math.floor(Math.random() *
                        letters.length));
                    for (let i = 0; i < length; i++) {
                        result += characters.charAt(Math.floor(Math.random() *
                            characters.length));
                    }
                    el=document.querySelector('#'+result)
                }
                return result;
            },
        },
        methods: {
            focus(event){
                let el=document.querySelector(['label[for="'+event.target.id+'"]'])
                if(el){
                    el.classList.add('label-active')
                }
            },
            blur(event){
                let el=document.querySelector(['label[for="'+event.target.id+'"]'])
                if(el && this.opass==''){
                    el.classList.remove('label-active')
                }
            },
            input(event){
                if(this.opass.length<this.ipass.length){
                    let s = this.ipass.slice(-1)
                    this.opass=''.concat(this.opass,s)
                    s = ''
                    for(let i=0;i<this.ipass.length;i++)s=''.concat(s,'•')
                    this.ipass=s
                    this.$emit('input',this.opass)
                }else{
                    if(this.opass.length>this.ipass.length){
                        this.opass=this.opass.slice(0,this.ipass.length)
                        this.$emit('input',this.opass)
                    }
                }
            },
            keyDown(event){
                if(event.key=='ArrowLeft'||event.key=='ArrowRight'||event.key=='ArrowUp'||event.key=='ArrowDown'){
                    event.preventDefault()
                }
            },
        },
    }
</script>

<style scoped lang="scss">
.logpass{
    padding-top:14px;
    padding-bottom: 12px;
    display: flex;
    & label{
        padding: 5px;
        position: absolute;
        color: #999;
        transition: .3s cubic-bezier(.25,.8,.5,1);
    }
    & .label-active{
        font-size: 10px;
        margin-top: -20px;
        margin-left: -5px;
    }
}
</style>