Issue encountered while attempting to deactivate button until numerical data is entered in the OTP field using Vuejs

      otp_value: '', 
      isFadeout: false,
     
     verifyOtp() {
          this.disabled = true;
          this.otpBtnClicked = false;
          this.verified = true;
         },
        

 <input
                              class="otp-number-login"
                              type="number"
                              v-for="(key, i) in activationKeyFields"
                              :key="i"
                              :data-length="key.length"
                              :data-index="i"
                              :ref="`input-${i}`"
                              v-model="key.value"
                              @input="handleActivationInput($event)"
                              placeholder="-"
                              maxlength="1"
                            />
 <button
                            class="verify-button-otp pxy_0"
                            v-on:click="isFadeout = true"
                            :disabled="otp_value.length < 4"
                            @click="verifyOtp"
                            id="verifybtn"
                          >
                            VERIFY
                          </button>

I am experiencing an issue with the OTP verification process. Despite having the logic for the OTP functionality working correctly, I am facing a problem where the 'isFadeout' attribute is not behaving as expected after the user enters the OTP and clicks the verify button. Additionally, if the user closes the OTP field without entering any numbers and then clicks verify again, the verification process still goes through erroneously.

javascriptvue.js

Answer №1

It seems like the issue lies with your button code

 <button
  class="verify-button-otp pxy_0"
  :disabled="otp_value.length < 4"
  @click="verifyOtp"
  id="verifybtn"
>

verifyOpt() {
  isFadeout = true;
  ...
}

It appears that you are using both v-on:click and @click, but remember that they essentially do the same thing. Perhaps, the use of @Click overrides your logic for isFadeout. Ensure to place your isFadeout = true within the verifyOpt method.

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

Packager freezing after running npm audit and the component directory is nonfunctional

Greetings, To begin with, I would like to acknowledge that this issue may have been addressed in previous posts, but despite following suggestions on Stack Overflow and GitHub, I am still facing two specific problems. Here are the issues I am encounterin ...

javascriptreact-nativenpmexpo

What is the best method to reset numerous select boxes within a form using jQuery?

What is the best way to reset multiple select boxes within a dynamically generated form using jQuery? There are several select boxes that may have selected options The select boxes are not known in advance as they are generated dynamically Some option ta ...

javascriptjquery

React's connect method is causing issues with my test case

Attempting to create a test case for my jsx file... Took a sample test case from another jsx file... The other file does not have the connect method... But this new file contains the connect method... Believe this is causing issues with my test case... Any ...

javascriptjqueryangularjsreactjsmocha.js

Multer is successfully retrieving images, but unfortunately, it is failing to save the files in the intended directory

I am currently facing an issue with my Express server. The problem arises when a user attempts to make a post request for their profile, including a profile picture submission. I have set up Multer to handle the image upload process and store the photo in ...

javascriptnode.jsexpressmulter

Analyze items in two arrays using JavaScript and add any items that are missing

I am working on a JSON function that involves comparing objects in two different arrays, array1 and array2. The goal is to identify any missing items and either append them to array2 or create a new array called newArray1. Here is an example: const arra ...

javascriptarraysjson

Filtering an array by a search term

How do you filter an array based on a specific search term? For example, if we have an array [Tom Harry, Tom John, John Glen, Tom Harward] and we search for "Tom H," then only Tom Harry and Tom Harward should be the output. [Tom Harward, Tom Harry]; Usin ...

javascript

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

javascriptangularjscodeignitertwitter-bootstrapcodeigniter-2

Error message saying 'Callback has already been invoked' returned by an async waterfall function

I'm facing an error that I understand the reason for, but I'm unsure how to resolve it. Here's a breakdown of my initial function: Essentially, I am making a get request for all URLs stored in the database and then, for each URL response, I ...

javascriptnode.jsasync.js

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

javascriptvue.jsfabricjspaperjs

Looking to locate or track duplicate values within a multi-dimensional array?

In a multidimensional array, I am looking to detect and count duplicates. If duplicates are found, an alert should be triggered. Arr =[[2,"sk"],[3,"df"],[7,"uz"],[3,"df"],[7,"gh"]] Suggestions: One way to ...

javascriptnode.jsarraysjsonreactjs

Tips for incorporating routes in Polka.js in a way that resembles the functionality of express.Route()

One of the challenges I am facing is trying to import route logic from another file in my project. While using Express.js, this could be done easily with express.Route(). However, when attempting polka.Route(), an error occurs stating that Route doesn&apos ...

javascriptnode.jsexpressroutes

Ways to extract the maximum value from a dataset formatted in JSON

My current project involves using highcharts to create data series for plotting the chart, which looks something like this: series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] I have been considering ...

javascriptjqueryjson

The Vuetify asynchronous search feature is only able to send single characters at a time, and it doesn't concatenate the characters

In my Vue component, I have the following code: <template> <v-form ref="form" @submit.prevent="search"> <v-row class="pa-0"> <v-col cols="12" md="2" class="d-flex"> <v-autocomplete ...

vue.jsvuejs2vuetify.js

What is the best way to transform a GET request with a query string into a promise?

After successfully making a request with querystring params, I encountered an issue while trying to promisify my request: // Works var Promise = require("bluebird"); var request = Promise.promisifyAll(require("request")); request.get({ url: 'htt ...

javascriptnode.jsrequestnpm

submit a new entry to add a record to the database

Hey there, I recently started learning PHP and JS and I'm trying to insert a row into a WordPress database table. I need to get the information needed for insertion from another table, but I'm facing an issue with the PHP file as it's not in ...

javascriptphphtmlwordpress

Guide to shutting down a print dialogue in a web browser with javascript

Looking for a way to close the print window of a browser using JavaScript or any other method, with JavaScript being the preferred option. Any help on closing the print window for IE, Chrome and Safari would be greatly appreciated. Please assist.. Thank ...

javascriptjquery

Is it possible to check dynamically if a string contains multiple substring matches?

Currently, I am in the process of developing a search suggest feature that will provide the best match based on certain criteria. Below is the code snippet along with my explanatory comments. /* string = {"Canna Terra PLUS 50 Litres", "Canna Vega ...

javascriptarraysstringmatch

When a cursor hovers over an image, a dark line appears

I wanted to create a hover effect where the image would enlarge when hovered over. I achieved this using a JavaScript function that applies the transform property with a scale of 1.2 to the picture. However, during the animation, a black line appears at th ...

javascriptcss

There was an issue with the Discord.js (v12) Giveaway Command that resulted in an error stating "Error: Cannot read property 'hasPermission' of undefined"

Hey everyone, I'm trying to develop my own Discord bot and I want to add a giveaway command to it. I found an example code online that I tried to implement, but unfortunately, it's not working as expected... const ms = require('ms'); c ...

javascriptnode.jsdiscord.js

Dynamically importing files in Vue.js is an efficient way to

Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...

javascriptreactjsmeteorvue.jsvuejs2