CODEWITHSUNDEEP
javascriptvue.js
Jackson J
Jackson J

Reputation: 1523

Vue.js component to display password field

Let's say, I have 

<input type="text">

I want to allow user to enter password inside this input.

Problem: how to display one value and to store another?

To display modified value is very simple:

// when user is inside input
valueEncrypted() {
            let s = "";
            for(let i = 0; i < this.value.length; i++) {
                if(i === this.value.length - 1) {
                    s += this.value[i]; //show last character types
                } else {
                    s += "*";
                }
            }
            return s;
        }

  // when user is outside of input
   s += "*"; // only this line is left inside loop

But how to store one value ("password") and display another ("*******d") inside input field.

Upvotes: 2

Views: 3226

Answers (1)

Saurabh
Saurabh

Reputation: 73649

You can take advantage of the fact that <input v-model="something"> is just syntactic sugar for

<input v-bind:value="something" v-on:input="something = $event.target.value">

So with this you can write a component, where you can pass the vue instance variable and modify it inside the component, I have created a similar component :

Vue.component('passoword', {
  template: '\
    <input type="text" v-model="localVar"  @keyup="addPass">\
  ',
  props: ['value'],
  data: function() {
    return {
      localVar: this.value
    }
  },
  methods: {
    addPass: function(event) {
      let LocalVal = this.value + event.key
      this.$emit('input', LocalVal)
      let s = "";
      for (let i = 0; i <= LocalVal.length; i++) {
        if (i === LocalVal.length) {
          s += LocalVal[i-1]; //show last character types
        } else {
          s += "*";
        }
      }
      this.localVar = s
    }
  }
})

You can see it's demo here.

You can also also look at this link for an alternate approach.

Upvotes: 2

Related Questions