Is there a way in Vue to switch between encrypted and unencrypted content in an input field?

Question

Is there a way in Vue to switch between encrypted and unencrypted content in an input field?

I'm grappling with the challenge of creating an input field where the contents are initially hidden as 'ab****gh' and can be toggled to reveal as 'abcdefgh' upon a click. I've been experimenting with some code, but I'm struggling to ensure that the value is reactive when I make changes. Here's a snippet of what I have so far.

Essentially, my goal is to alternate between displaying the original content in the input field and its encrypted version.

Could someone help me identify where I might be making a mistake?

regex_hide_characters: /(?<!^).(?!$)/g,
inputValue: this.value,
encryptedInputValue: this.value.replace(this.regex_hide_characters, '*'),

hidePrivateContent() {
    this.reveal = !this.reveal;
    if (!this.reveal) {
        this.$refs.input.value = this.encryptedInputValue;
     }
},

javascript vue.js vuejs2

Answer 1

Answer №1

Here is a simple example showing how to achieve this:

new Vue({
 el: '#app',
 computed: {
  hiddenPassword() {
    if (this.isPasswordVisible) return this.password.slice(0, 2) + '*******';
    return this.password;
  }
 },
 data() {
  return {
    isPasswordVisible: true,
    password: 'abc124defg'
  }
 },
 methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <div>{{hiddenPassword}}</div>
  <button @click="isPasswordVisible=!isPasswordVisible">toggle view</button>
</div>

In this code snippet, I am using computed properties to determine how to display the "protected" password based on the instance's data.

I hope this explanation helps!

Answer 2

Here is a simple example showing how to achieve this:

new Vue({
 el: '#app',
 computed: {
  hiddenPassword() {
    if (this.isPasswordVisible) return this.password.slice(0, 2) + '*******';
    return this.password;
  }
 },
 data() {
  return {
    isPasswordVisible: true,
    password: 'abc124defg'
  }
 },
 methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <div>{{hiddenPassword}}</div>
  <button @click="isPasswordVisible=!isPasswordVisible">toggle view</button>
</div>

In this code snippet, I am using computed properties to determine how to display the "protected" password based on the instance's data.

I hope this explanation helps!

Is there a way in Vue to switch between encrypted and unencrypted content in an input field?

Answer №1

Similar questions

Fetching values from dynamically generated elements in a Vue.js loop

Stopping an HTML5 range input at a specific number: Tips and tricks

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Using the object value to map an array and populate the resulting elements

What could be preventing this src tag from loading the image?

What causes my XMLHttpRequest to be terminated prematurely?

How to create a clickable link using Vuetify's v-btn component

What is the process of converting a value from an HTML form into a PHP variable?

tips for modifying html element attributes using angular

Updating the state within a component while specifically modifying the second item within a list

Using Material-UI with @emotion/cache in SSR results in consistently empty cache

Displaying MySQL data on an HTML page with Node.js

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Setting the useState hook to a User type in React - the ultimate guide!

Establish map boundaries using the longitude and latitude of multiple markers

Learn the process of playing a video in an HTML5 video player after it has finished downloading

Creating a Star Rating System Using HTML and CSS

Changing the 'badge' to 'panel' within the UI framework of 'ant design' has been set

Issues with implementing Dark mode in TailwindCSS with Nuxt.js