如何禁用按钮，直到用户在 Vuejs 的 Otp 字段中输入数字？

Question

 <v-otp-input ref="otpInput" input-classes="otp-number" separator=" ":num-inputs="4":should-auto-focus="true":is-input-num="true" /> <button class="verify-button" v-on:click="isFadeout = true":disabled="v-otp-input.length < 4" >VERIFY </button>

如何禁用验证按钮，直到用户在 Otp 字段中输入数字，尝试放置：disabled="v-otp-input.length < 4。

Answer 1

您可以使用@on-change或@on-complete 。

请像这样尝试。

<v-otp-input
    ref="otpInput"
    input-classes="otp-number"
    separator=" "
    :num-inputs="4"
    :should-auto-focus="true"
    :is-input-num="true"
    @on-change="handleOnChange"
    @on-complete="handleOnComplete"
/>
<button class="verify-button" v-on:click="isFadeout = true"  :disabled="!otp_complete" >VERIFY</button>

...
data() {
    return {
      otp_value: '',
      otp_complete: false
},
methods: {
    handleOnComplete(value) {
      this.otp_complete = true;
      this.otp_value = value;
    },
    handleOnChange(value) {
      this.otp_value = value;
    },
},
...

您也可以使用otp_value来禁用该按钮。

<button class="verify-button" v-on:click="isFadeout = true"  :disabled="otp_value.length < 4" >VERIFY</button>