Implementing a one-time watcher with user input in Vue.js

I am facing an issue with using the input tag in a Vue template. I need to change the type from 'password' to 'text'.

  <input type="text" v-model="form.password" />

To achieve this, I have created a watch code to convert text string to asterisks.

  watch: {
    "form.password": function(val) {
      this.form.password = *
    }
  }

However, as soon as I type one character, it gets changed to '*', triggering the watch function infinitely.
Can anyone suggest a solution to this problem? Thank you for taking the time to read through my query.

javascriptvue.js

Answer №1

To address the issue with your wristwatch, consider utilizing the input event instead, as it is triggered only when you type something.

<input type="text" :value="formData.pin" @input="updatePIN" />

Subsequently, in your function:

methods: {
    updatePIN: function(event) {
        this.formData.pin = "*";
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on retaining label names for input boxes

Check out this Plunker example. I am trying to figure out how to keep labels on top of textboxes in this Plunker. Can anyone help me with that? <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-clas ...

javascripthtmlangularjs

Typescript's dynamic React component and its conditional types

I am currently working on a dynamic React component and I am facing an issue with properly passing the correct propType based on the selected component. The error arises when using <SelectComponent {...props.props} /> because the props do not match t ...

javascriptreactjstypescript

What is the most efficient way to utilize a single connection to interact with MongoDB?

I have a series of functions that are responsible for running various queries. Here is the code I am working with: var MongoClient = require('mongodb').MongoClient; async function createDatabase() { MongoClient.connect(urlMongoDB, function(er ...

javascriptnode.jsmongodb

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

javascripthtmlcssreactjsmaterial-ui

AngularJS Error: $element.find(...) does not support iteration

I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented: <div ng-app="datatable"> <div ng-controller="voucherlistcontroller"> ...

javascriptangularjsspring-bootdatatables

Is it possible to utilize Jsoup to extract specific portions of JavaScript code from a webpage?

I am looking to extract data from the following script: $(document).ready(function(){ $("#areaName").val(1);$("#state").val(29);$("#city").val(1); $("#subareaName").val(1);$("#lane").val(1); } Specifically, I need to retrieve values such as areaName ...

javascriptandroidjsoup

Creating a customized URL using the famous "@" symbol

Is it possible to set up a dynamic route in Next.js that includes the @ symbol? For instance, localhost:3000/@some_username I'm familiar with creating dynamic routes using the pages folder, but I'm not sure how to achieve this specific format w ...

javascriptnext.js

`amqplib - What is the current number of active consumers on the queue?`

Seeking insight on using the amqplib module for Node JS and RabbitMQ: 1) Is there a method to determine the number of subscribers on a queue? 2) What is the process for ensuring that each queue has only one consumer key? Appreciate any guidance! ...

javascriptnode.jsrabbitmqamqpnode-amqp

Navigating to the next page in Angular JS by clicking "Save and Next" which

Hey there, I'm currently diving into Angular JS and working on a CMS system with it. Right now, we're dealing with around 30 to 40 Objects that we load into a list. Whenever one of these objects is clicked, a Modal Window pops up using the Modal ...

javascriptangularjshtmlangularjs-scopecontent-management-system

JavaScript utilizing a PHP variable

In my attempt to merge a PHP variable with JavaScript, I aim to access the "the_link_to_the_page_I_want". window.onload = function openWindow() { window.open('the_link_to_the_page_I_want', 'newwindow', config='height ...

javascriptphp

Using jQuery, you can easily insert a <span> tag around selected text and then save this modification permanently in a local HTML file

I have compiled notes in an HTML file stored on my local computer, with the intention of keeping it solely for personal use. For instance, I have a snippet like this: <p> this is an example text</p> My goal is to highlight the word "example" ...

javascriptphpjqueryhtml

Tips for utilizing Vue-CLI-service to serve content over HTTP-2

Is there a way to configure Vue-CLI-service to serve on HTTP-2 instead of the default HTTP 1.1? ...

vue.jswebpack-dev-serverhttp2vue-clinetwork-protocols

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

Having trouble getting a basic Vue 3 and Electron example to function properly?

I attempted to create a sample electron application using vuejs 3 on Debian Buster with node version v10.15.1. I roughly followed the instructions provided at https://github.com/nklayman/vue-cli-plugin-electron-builder: vue --version 3.6.3 vue create fr ...

vue.jselectronelectron-builder

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

When incorporating reduce into your code, remember to expect an undefined

Imagine you have an array like this: const novels = [ { id: 1, name: 'The Da Vinci Code', genre: 'Mystery', author: { name: 'Dan Brown', birthYear: 1964, }, releaseYear: 2003, }, { ...

javascriptreduce

The Geocoder.geocode() method returns XML instead of JSON when invalid credentials are provided

Currently in the process of developing a program that converts addresses from a database to their corresponding lat/long coordinates using the HERE Geocoding API. In order for multiple users to utilize this program, they must manually input their app_id an ...

javascriptgeocodinghere-api

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

I am working with two boxes: one is called AuthorizedAmount and the other is called LessLaborToDate: <div class="col-md-6"> <div class="form-group"> <label>Authorized Amount</label> <div class="input-group"> & ...

javascriptjqueryhtmlasp.net-mvcrazor

What methods are available for updating the href color of an element using the DOM?

I am looking to update the color of a tab (Mathematics-tab) based on the value of 'aria-selected' changing to true in Bootstrap. I have multiple tabs, including one for mathematics, and I want to visually differentiate between selected and unsele ...

javascripthtmlcssbootstrap-4

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

phpjavascriptajaxjsonundefined