Use :state with masked input? about vue-the-mask

[neves]

I don't know what :state means.

[tigerclaw-az]

I believe this comes from Bootstrap 4 functionality with inputs: https://bootstrap-vue.js.org/docs/components/form-input

It gives a way to perform validation against the input

[mchumer]

I'm looking for this feature too.. It's possible to use :state?

[mchumer]

I've figured out how to get the results we want:

                                <b-form-group
                                    label-for="user-celular"
                                    label-size="sm"
                                >
                                    <template v-slot:label>
                                        Celular <span class="text-danger font-weight-bold">*</span>
                                    </template>
                                    <the-mask
                                        id="user-celular"
                                        v-model="createuser.celular"
                                        :mask="['(##) #####-####']"
                                        type="text"
                                        required
                                        placeholder="(##) #####-####"
                                        class="form-control form-control-sm"
                                        :class="createuserstate.celular == false ? 'is-invalid' : createuserstate.celular && createuserstate.celular == true ? 'is-valid' : ''"
                                        :autocomplete="generateRandomString(7)"
                                    />
                                    <span
                                        v-if="createuserstate.celular == false"
                                        id="user-celular-feedback"
                                        class="invalid-feedback"
                                    >
                                        Insira um celular válido.
                                    </span>
                                </b-form-group>

And.. in vue watch...

    'createuser.telefone': function (value) {
        if (value.length == 10) {
            this.createuserstate.telefone = true;
        } else {
            this.createuserstate.telefone = false;
        }
    },