Events

This page demonstrates usage of the events emitted by OTP Input.

update:modelValue

Emitted when the component needs to update the model.

<script setup lang="ts">
import { ref } from 'vue';
const otp = ref<string>('');

const onUpdate = (v) => {
  alert(`New value is ${v}`);
};
</script>

<template>
  <otp-input v-model="otp" @update:model-value="onUpdate" />
</template>

change

Emitted when the OTP value changes.

<script setup lang="ts">
import { ref } from 'vue';
const otp = ref<string>('');

const onChanged = (v) => {
  alert(`The value has changed to ${v}`);
};
</script>

<template>
  <otp-input v-model="otp" @update:change="onChanged" />
</template>

complete

Emitted after all the inputs have been filled.

<script setup lang="ts">
import { ref } from 'vue'
const otp = ref<string>('')

const onComplete = (v) => {
    alert(`OTP input completed with value: ${v}`)
}
</script>

<template>
  <otp-input v-model="otp" @update:complete="onComplete" />
</template>