Using getter setter for value

[XEngine]

Hello and forgive me asking this question in the issues.

    const { value, errorMessage } = useField('name', inputValue => !!inputValue);

I am new to vue3 and the libraries of it so I am thinking this value from useField acts like a reactive model like old vue2 and while in vue2, I can use this model as a computed with get(), set() variable so I can modify the value while setting it. Can I achieve the same behaviour in vee-validate 4 ?

[XEngine]

export function useModelBinding(initialValue, emit, opts) {
    const {errorMessage, value} = useField(opts.name, opts.rules, {initialValue});

    const modelBinding = computed({
        get: () => {
            return value.value
        },
        set: (inputValue) => {
            value.value = inputValue
            emit('update:modelValue', value)
        }
    })

    return {
        errorMessage,
        modelBinding
    }
}

used this composable solution for my custom input component. Don't know this is a stable one yet.

[logaretm]

If that is what's working for you then go with it, looks fine to me

[stefanzweifel]

@XEngine Sorry for hijacking this thread, but can you give a quick example how you used this composable function in your custom input components?

I'm currently struggling to understand how to combine my custom input component with vee-validate while still using v-model.

[XEngine]

I am still tryna figure out how to convert all my validation-observers and provider components into vue3 but for now here is my custom InputComponent

don't mind the huge prop set what you need is v-model usage

InputComponent.vue

<template>
    <div :class="[$css('relative')]">
        <label v-if="label" :class="[$css('text-gray-500 mb-1 block text-sm'), !!errorMessage && $css('text-danger')]" :for="id ? id : guid">
            {{ label }} <span v-if="rules.indexOf('required') > -1" :class="$css('text-red-500')">*</span>
        </label>
        <div :class="$css('relative')">
            <input :id="id ? id : guid"
                   v-model.trim="modelBinding"
                   :autocomplete="autocomplete"
                   :class="[
                    $css('read-only:text-gray-300 read-only:cursor-not-allowed read-only:bg-gray-100 px-3 py-2 block w-full flex-grow border rounded bg-transparent appearance-none transition focus:outline-none focus:border-primary focus:ring ring-primary leading-normal text-black text-base font-sans !ring-opacity-30'),
                    !!errorMessage && $css('!border-danger !bg-red-50 !ring-danger'),
                    type === 'password' && $css('!pr-12'),
                   ]"
                   :disabled="disabled"
                   :max="type === 'date' ? getMaxYear : null"
                   :name="name"
                   :placeholder="placeholder"
                   :readonly="readOnly"
                   :type="type === 'password' && isRevealed ? 'text' : type"
                   @blur="blur"
                   @focus="focus"/>
            <div :class="$css('absolute top-1/2 -translate-y-1/2 right-7')" @mousedown="reveal"
                 @mouseup="unReveal"
                 @touchend="unReveal"
                 @touchstart="reveal">
                <dp-icon v-if="type === 'password'"
                         :icon="!isRevealed ? 'eye' : 'eye-close'"/>
            </div>
        </div>
        <div v-if="!validErrorDisabled && !!errorMessage"
             :class="[$css('text-sm text-danger mt-1'), {[$css('block')] : !!errorMessage}]">
            {{ errorMessage }}
        </div>
    </div>
</template>

<script>
    import {computed, ref} from 'vue'
    import {nanoid} from "nanoid";
    import {useModelBinding} from "@/Composables/use-model-binding.js";

    export default {
        props: {
            insideIcon: {
                type: Object,
                default() {
                    return {
                        icon: "",
                        badgeText: "",
                    }
                }
            },
            validErrorDisabled: {
                type: Boolean,
                default: false
            },
            id: {
                type: String,
                default: ''
            },
            test: {
                type: String,
                default: null
            },
            typeAhead: {
                type: Boolean,
                default: false
            },
            typeAheadData: {
                type: Array,
                default() {
                    return []
                }
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            readOnly: {
                type: Boolean,
                default: false,
            },
            label: {
                type: String,
                default: ""
            },
            name: {
                type: String,
                default: ""
            },
            placeholder: {
                type: String,
                default: ""
            },
            cy: {
                type: String,
                default: ''
            },
            rules: {
                type: String,
                default: ""
            },
            type: {
                type: String,
                default: "text"
            },
            vid: {
                type: String,
                default: ""
            },
            autocomplete: {
                type: String,
                default: ''
            },
            focusCallback: {
                type: Function,
                default: () => {
                }
            },
            modelValue: String
        },
        emits: ['update:modelValue'],
        setup(props, {emit}) {
            const guid = 'i' + nanoid(10)
            const isRevealed = ref(false)

            const reveal = () => {
                isRevealed.value = true
            }
            const unReveal = () => {
                isRevealed.value = false
            }

            const {modelBinding, errorMessage} = useModelBinding(props.modelValue, emit, {
                name: props.name,
                rules: props.rules,
                inputType: props.type
            })

            return {
                errorMessage,
                guid,
                getMaxYear,
                reveal,
                unReveal,
                isRevealed,
                modelBinding,
            }
        },
    }
</script>

and my composable file
use-model-binding.js

import {useField} from "vee-validate";
import {computed} from "vue";

export function useModelBinding(initialValue, emit, opts) {
    const {name, rules, ...restOpts} = opts
    const {errorMessage, value} = useField(name, rules, {initialValue, ...restOpts});

    const modelBinding = computed({
        get: () => value.value,
        set: (inputValue) => {
            value.value = inputValue
            emit('update:modelValue', inputValue)
        }
    })

    return {
        errorMessage,
        modelBinding
    }
}

Usage :

<input-component rules="required" :label="$t('information.auth_forms.surname')"
                                             :name="$t('information.auth_forms.surname')"
                                             autocomplete="family-name"
                                             id="family-name"
                                             v-model="lastName"/>

[stefanzweifel]

@XEngine Thank you so much! ❤️