How to open div tag on button click in vuejs?

 <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">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">
            <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.

Answer

<template>
    <button @click='sendOtp'>send otp</button>
    <div class='otp-wrapper dn' v-if="otpBtnClicked">
        // add your remaining otp wrapper part
    </div>
</template>

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

this should solve your problem.

Just use a v-if statement.

if you want crazy animations then just add a class to your otp-wrapper with the specified animation in css

Advertisement

Answer