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

Filtering Key Presses in Quasar: A Comprehensive Guide

Seeking Assistance I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link. <input type="text" name="searchBox" value="" placeholder="ب ...

javascriptvue.jsvue-componentquasar-framework

Saving a collection of unique identifiers in Firebase

Struggling to find a solution for organizing Firebase data: Each user has posts with generated IDs, but how do I store these IDs in a user node efficiently? Currently using string concatenation and treating them like a CSV file in my JS app, but that feel ...

javascriptfirebasefirebase-realtime-database

Tips for serving a minified JavaScript file located in the dist directory on GitHub Pages

I recently followed a tutorial on creating an app using VueJS cli and now I want to deploy it on gh-pages. After generating the dist folder with the yarn generate command, I referred to a deployment guide to publish the app. However, when I visit the dep ...

vue.jsgithub-pagesnuxt.js

The height of the input element is greater than the size of the font

I am facing an issue with an input element that has a height 2px higher than what I expected. Here is the relevant CSS: .input { font-size: 16px; padding: 15px; border: 1px solid black; border-radius: 3px; width: 400px; } <input class=" ...

htmlcss

Deactivate certain days in Material UI calendar component within a React application

Currently, my DatePicker component in React js is utilizing material-ui v0.20.0. <Field name='appointmentDate' label="Select Date" component={this.renderDatePicker} /> renderDatePicker = ({ input, label, meta: { touched, error ...

javascriptreactjsdatepickermaterial-uiredux-form

Steps for displaying a deeply nested array and string within an object that is nested further in an array

I've been troubleshooting an issue in my Next.js code where I'm trying to render data called items. My goal is to display the descriptions in an array as a list and display the description that is a string as it is. However, I cannot use the map ...

javascriptreactjsarraysobjectnext.js

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

css

Identifying the conclusion of a folder being dropped in vanilla JavaScript

I am working on determining when a directory tree has been completely traversed after being dropped onto a page. My goal is to identify the point at which the next process can begin once the entire folder and its sub-directories have been processed by the ...

javascript

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

The table disappears when there is no data available in the database

One of my challenges involves a table that displays data retrieved from a database. The code for this is as follows: <table class="table table-hover table-bordered" style="width:300px" id="contact"> <tbody data-bind="foreach:items"> ...

phpjavascriptajax

The process of altering a property in input data within Vue.js

I have a component called Input.vue that displays a label and an input field of some type. Here is how it looks: <template> <div class="form-element"> <label :for="inputId" :class="['form-element-tit ...

javascriptvue.js

Transmit a data element from the user interface to the server side without relying on the

I have developed a MEAN stack application. The backend of the application includes a file named api.js: var express = require('express') var router = express.Router(); var body = 'response.send("hello fixed")'; var F = new Function (" ...

javascriptnode.jsapiexpressroutes

Is the div empty? Maybe jQuery knows the answer

I currently have a <div id="slideshow"> element on my website. This div is fully populated in the index.php file, but empty in all other pages (since it's a Joomla module). When the div is full, everything works fine. However, when it's emp ...

javascriptjquerycss

PubSub.js offers a solution for efficiently managing multiple subscriptions or dealing with multiple callbacks in a more streamlined manner

I am currently exploring the most effective approach for handling a specific scenario. My goal is to establish the following flow: 1.) Obtain configuration data from the server (asynchronously) 2.) Execute doStuff() once the configuration data is receive ...

javascript

Sorry, we encountered a snipcart issue: The public API key was not found. To fix this, please ensure that the attribute data-api-key is

I'm experiencing issues with loading Snipcart correctly. It's able to detect the API key on localhost and display the number of items in the cart, but when deployed to Netlify, it briefly shows the item count before displaying the error message: ...

javascriptreactjssnipcart

Is there a common method for generating complex identifiers to be used as the HTML element's id, class, or name attributes

Is there a recommended method for "encoding" complex identifiers such as {Source:"ARCH.1", Code: "456-789.456 A+", SubNumber:##2} to be used in HTML elements' id, class, and name attributes? I could come up with something myself, but perhaps there is ...

javascripthtml

Vue wait for completion of external request

One challenge I'm facing in my Vue application is that a page with an animation on route enter experiences a drop in frames from 60 to 20fps when an embedded Vimeo video is present. It seems that the request to the Vimeo server delays the animation st ...

vue.jsvimeo

Converting HTML Javascript to JAVA with the help of Selenium

Can someone help me extract the value of h1 as a string using selenium? Check out the HTML javascript snippet below- <script type="text/javascript"> $(window).load(function() { var $windowHeight = $(window).height() -12; $(" ...

javajavascriptselenium-webdriver

Display a list with a set limit and an option to show more by clicking

I am currently struggling to develop a list of items that displays 3 items per row, and when the "show more" button is clicked, another 3 items should be displayed. My issue arises when using map and slice, as this method results in rendering 3 of the same ...

javascriptreactjsalgorithmmaterial-ui

What is the process for populating a checkbox with data from a configuration file using JavaScript?

I have a requirement where I need to populate a list of checkboxes with data from a configuration file. To elaborate, if my checkboxes are meant to select sports, within my JSON configuration file I have an array like this: sports: ["Tennis", "Rugby", "S ...

javascripthtmlcheckboxconfig