copy paste issue

[sirvan-monfared]

hey there seems like copy pasting values not reflected on model so onComplete and onChange are not firing when pasting otp value

[nimaebra]

Hi sirvan I tested the latest version and onComplete fired when pasting OTP value. Can you share your code or explain more about your problem?

[ejirocodes]

Thaks a lot @nimaebra,

@sirvan-monfared, you can also try out a watcher

watch(pin, (value: string) => {
  if (value.length === 6) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
});

[67pankaj]

@ejirocodes in the watch - what does pin points to, there is no v-model we only have ref on the component.

[ejirocodes]

@67pankaj, the pin can be a ref or a reactive variable 👇🏽

import { ref, watch } from 'vue'
const pin = ref('')

watch(pin, (value: string) => {
  if (value.length === 6) {
    // do something because pin is complete
  } else {
    // do something because pin is not complete
  }
});

[67pankaj]

@ejirocodes what I meant was where do we get/ update the value of pin. Because onComplete doesn't seem to fire when we copy paste the code.

[ejirocodes]

@67pankaj, what version are you using, can you set up a sandbox or install an earlier version

[67pankaj]

@ejirocodes using version 0.3.6

this is the code :

<v-otp-input
      ref="otpInput"
      class="otp-inputs-wrapper row no-wrap items-center"
      input-classes="otp-input"
      :num-inputs="6"
      :placeholder="['0', '0', '0', '0', '0', '0']"
      :is-input-num="true"
      separator=""
      @on-change="handleOnChangeOtp"
      @on-complete="handleOnCompleteOtp"
    />

const isOtpComplete = ref(false);

function handleOnChangeOtp(value) {
  // value represents the single digit input
  isOtpComplete.value = false;
}
function handleOnCompleteOtp(value) {
  // value represents the complete 6 digit otp
  isOtpComplete.value = true;
}

how do I get the updated value everytime something is changed

[ejirocodes]

@67pankaj, it's written in the docs here and also the example here, you're not doing anything with the value argument at the moment