Tengo esta entrada de texto personalizada. Devuelve el valor del modelo v, sin embargo, tiene dos problemas.
Cuando configuro un valor en created(), establece modelValue e inputValue, pero meta.valid todavía está configurado como falso y no puede continuar con la validación.
Cuando configuro un valor en watch(), establece modelValue pero no inputValue y meta.valid es falso.
<template> <div class="TextInput" :class="{ 'has-error': !!errorMessage, 'success': meta.valid }" > <label :for="name">{{ label }}</label> <input :name="name" :id="name" :type="type" :placeholder="placeholder" :value="modelValue" :class="inputClass" @input="onInput($event)" @blur="handleBlur" /> <p class="help-message" v-show="errorMessage || meta.valid"> {{ errorMessage || successMessage }} </p> </div> </template> <script> import { useField } from "vee-validate"; export default { props: { type: { type: String, default: "text", }, value: { type: String, default: "", }, name: { type: String, required: true, }, label: { type: String, required: false, }, successMessage: { type: String, default: "", }, placeholder: { type: String, default: "", }, modelValue: { type: [String, Number], description: "Input value", }, inputClass: { type: String, default: "", }, }, setup(props, {emit}) { const { value: inputValue, errorMessage, handleBlur, handleChange, meta, } = useField(props.name, undefined, { initialValue: props.modelValue, valueProp: props.modelValue }); const onInput = (event) => { handleChange(event, true) emit('update:modelValue', event.target.value) } return { onInput, handleChange, handleBlur, errorMessage, inputValue, meta, }; } }; </script>