A method to trigger the opening of a div tag when a button is clicked using Vue.js

 <div class="input-wrapper">
          <div class="mobile-icon"></div>  
          <input
            class="input-section label-set"
            type="text" 
            v-model.trim="$v.mobile.$model" :class="{'is-invalid': validationStatus($v.mobile)}" 
             placeholder="Enter your mobile number" :maxlength="maxmobile" v-model="value" @input="acceptNumber"
          />
        <div v-if="!$v.mobile.required" class="invalid-feedback">The Mobile Number field is required.</div>

                <!-- <div v-if="!$v.mobile.minLength" class="invalid-feedback">You must have at least {{ $v.mobile.$params.minLength.min }} numbers.</div> -->
                <div v-if="!$v.mobile.minLength" class="invalid-feedback">Kindly check phone {{ $v.mobile.$params.maxLength.min }} number.</div>

          <!-- for 2nd screen -->
          <button class="verify-button" @click="displayOtpFields()">SEND OTP</button>
          <!-- for 3rd screen -->
          <div class="verified-section dn">
            <div class="tick-icon"></div>
            Verified
          </div>

          <label style="display: flex ; align-items: center">
            <input type="checkbox" style="margin-right: 5px;" class="" checked="checked" name="sameadr" />
            Reach out to me on<span class="whatsapp-icon"></span> Whatsapp
          </label>

          <div class="otp-wrapper dn" v-if="showOtpFields">
            <div class="enterprise-details">Enter OTP and send as an SMS</div>
            <div class="verify-wrapper">
              <input class="otp-number" type="text" placeholder="-" />
              <input class="otp-number" type="text" placeholder="-" />
              <input class="otp-number" type="text" placeholder="-" />
              <input class="otp-number" type="text" placeholder="-" />  
              <button class="verify-button-otp">Verify</button>
    
            </div>
            <div class="receive-otp">
              Did not receive OTP <b style="color: #ee1d24"> Resend Now </b>
            </div>
          </div>
        </div>

How to set condition when user clicked on send-otp button, It should display "otp-wrapper dn" div tag above.

created code for otp fields in html, But on button click, how to set condition to display otp fields.

javascripthtmlcssvue.js

Answer №1

<template>
    <button @click='sendOtp'>Click here to send OTP</button>
    <div class='otp-wrapper dn' v-if="otpBtnClicked">
        // Add the remaining part of your OTP wrapper here
    </div>
</template>

<script>
    export default{
         data(){ return { otpBtnClicked: false } },
         methods: {sendOtp() { this.otpBtnClicked = true; }}
    }
</script>

Implementing a v-if statement in your code will help resolve your issue.

If you desire animated effects, simply add a CSS class to your otp-wrapper element with the designated animation properties.

Answer №2

To start, simply hide the otp-wrapper-dn div by adding a display:none style to it. 

<div class="otp-wrapper-dn" style="display:none"> ... </div>

Next, set up an onclick event for the send OTP button and create a method for it in the methods section (or alternatively, you can use a pure JavaScript function) where you can specify how to make the div visible.

methods: {
  function MethodName(){
    // Include actions to send OTP to customer here
    var otpSent = document.getElementByClassName('otp-wrapper-dn')[0];
    // or document.querySelector('.otp-wrapper-dn');
    otpSent.style.display = "block";
  }
}
<button @click="MethodName()">Send OTP</button>

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

A Guide to Filtering MongoDB Data Using Array Values

I am trying to extract specific data from a document in my collection that contains values stored in an array. { "name": "ABC", "details": [ {"color": "red", "price": 20000}, {" ...

javascriptangulartypescriptmongodbmean-stack

I aim to retrieve the names of all directories

I am seeking assistance from seniors in creating a dropdown list of root directories using PHP. I have almost completed the task, but I am facing an issue with not being able to retrieve the root directory. For example, I want all directories like home/ab ...

javascriptphpajaxroot

Ways to align a bootstrap 4 row both vertically and horizontally in the center amidst other rows

Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally. As you scroll down, the main menu should be able to hide while ...

htmlcssbootstrap-4

Using Node.js and Typescript to implement a chain of logical AND operations with an array of any length

Setting: I am developing a versatile function that determines a boolean outcome based on logical AND operations. However, the function is designed to handle various types of objects and arrays, each requiring different conditions. Currently, my code look ...

javascriptnode.jsarraystypescriptobject

Actions cannot be performed on elements generated by ng-repeat

I am facing a challenge where I need to display a list of languages on a page, allowing users to change their selections based on previous choices. To achieve this functionality, I have written the following code snippet: ... <tbody> & ...

javascriptjqueryangularjs

jQuery load() issue

$('form.comment_form').submit(function(e) { e.preventDefault(); var $form = $(this); $.ajax({ url : 'inc/process-form.php', type: 'POST', cache: true, data:({ comment ...

javascriptjqueryajax

Embrace the presence of null values on the client side

When utilizing the code below, I can determine the location of logged-in users. However, there are some users who do not have a specific location assigned. For example, Administrators are common for all locations. In such cases, how can I set it so that ...

javascriptc#jqueryasp.net-mvc

Only retrieve links that don't have the specified class by using regular expressions

I am trying to extract all links from an HTML document using REGEX, except for those with a specific class name. For example: <a href="someSite" class="className">qwe</a> <a href="someSite">qwe</a> My goal is to only capture the ...

phpjavascriptasp.netregex

The Vue computed property is failing to retrieve the data it needs

I'm having trouble with the computed() property not retrieving data. Data was initialized in the created() property. Am I missing something here? Any guidance on how to resolve this issue would be greatly appreciated. const randomPlayers = { temp ...

javascriptvue.jsvuejs2vue-component

Does it make sense to prioritize robust $routeProviders and keep controllers slim?

Traditionally in MVC architecture, models are designed to be robust and controllers are kept minimal for easier testing. However, Angular lacks a clear model structure, making it challenging to organize code for reuse. Although Angular does offer services ...

javascriptangularjs

Tips for including HTML tags in strings without causing issues with nested tags

I am struggling with a string that contains both text and HTML tags, specifically <a href=""></a> tags. My goal is to apply the "i" tag around the text outside of the "a" tags without creating nested tags like: <i><a href=""></a ...

pythonhtmlregex

Angular does not display a loading indicator in the header

When handling service calls, I have implemented a loading indicator to provide feedback to the user. However, it appears that this indicator is not effectively preventing users from interacting with header items before the loading process is complete. My ...

htmlangular

Update the background URL of a div element using an HTML tag

My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...

javascripthtmlcss

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

Display a section of the picture at maximum width

Can anyone help with displaying only a portion of an image at full width (100%) without any overflow issues? The code I've tried is not working: .intro_sea { position: absolute; width: 101%; clip-path: inset(30% 50% 0 0); margin: 0; paddi ...

htmlcss

Display the progress bar's completion percentage during animation

Creating a progress bar using HTML with the following structure: <div class="progressbar"><div class="text">%0 Completed</div> <div class="progressbar_inner"></div> </div> Implemented jQuery code fo ...

jqueryhtmlcssprogress-barprogress

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

htmlcsssvg

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...

javascripthtmlcssdocumentation

Executing Javascript code that has been retrieved using the XMLHttpRequest method in a

Would it be feasible to modify this code to function recursively if the redirects to the js file that needs to be executed? function loadScript(scriptUrl) { var xhr = new XMLHttpRequest(); xhr.open("GET", scriptUrl); xhr.onready ...

javascriptajaxscriptingdownload

Is there a way for users to share their thoughts in response to the posts of

I'm looking to implement a feature that allows users to add comments on posts with an "add comment" button similar to what you see in platforms like Facebook. When the button is clicked, a small input box should open up and display the comment below t ...

phpjavascriptjquery