Vue Js Generate OTP: To generate an OTP using Vue.js and JavaScript, you can create a function that generates a random string of numbers using the Math.random() method. You can use Vue’s data binding to display the generated OTP on the front-end by binding the variable containing the OTP to the HTML element where you want to display it.

To trigger the function that generates the OTP, you can use an event listener on a button click event. Once the OTP is generated, you can send it to the user’s mobile device via SMS or display it on the screen for the user to enter into a form field.

How can Vue Js be used to generate a one-time password (OTP)?

This is a Vue.js code that generates a random 6-digit OTP (One Time Password) and displays it when the “Generate OTP” button is clicked. The HTML template contains a paragraph that is conditionally rendered based on the value of the “otp” variable, which is initially set to null.

The Vue instance has a “generateOTP” method that creates the OTP by randomly selecting digits from the string “0123456789”. The generated OTP is assigned to the “otp” variable using “this.otp = otp”. When the button is clicked, the “generateOTP” method is called and the value of “otp” is updated. The paragraph is then rendered with the new OTP value.

Here is an example of how you can generate a six-digit OTP in Vue.js:

Vue Js Generate OTP Example

<div id="app">
    <p v-if="otp">Your OTP is: {{ otp }}</p>
    <button @click="generateOTP">Generate OTP</button>
</div>
 <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    otp: null,
                }
            },
            methods: {
                generateOTP() {
                    let digits = '0123456789';
                    let otp = '';
                    for (let i = 0; i < 6; i++) {
                        otp += digits[Math.floor(Math.random() * 10)];
                    }
                    this.otp = otp;
                },
            },
        });
 </script>

Output of Vue Js Generate Random OTP