Custom component with v-model and useField (was working on v4.8.6, but not on v4.11.1 anymore)

[codeflorist]

I want to use a custom component receiving a reactive value (both-ways) via v-model, that performs validations with useField.

I was using the solution proposed here:
https://stackoverflow.com/questions/70982713/how-can-i-use-custom-component-vee-validate-with-v-model

this was working as of v4.8.6, but after upgrading to v4.11.1,changing the value via v-model does not get realized by vee-validate anymore and inputValue stays the same.

does anyone have a hint on a possible solution?

[logaretm]

Check this part in the documentation and let me know if it works for you.

[codeflorist]

yes it does, many thanks! 👍

i've also just submitted an edit of the stackoverflow-question.

[codeflorist]

@logaretm After upgrading from v4.11.3 to 4.11.4 this seems to have stopped working again.

i assume it could have something to do with the fix "Respect validateOnModelUpdate configuration"? But config says it's default is true, and i'm not changing it in my app.

here is my component (using vuetify):

<script setup lang="ts">
import { defineProps, toRef } from 'vue'
import { useField } from 'vee-validate'

const props = defineProps({
	name: {
		type: String,
		required: true,
	},
	type: {
		type: String,
		required: false,
		default: 'text',
	},
	label: {
		type: String,
		required: false,
		default: undefined,
	},
	clearable: {
		type: Boolean,
		required: false,
		default: true,
	},
	modelValue: {
		type: [String, Object],
		default: '',
	},
})

const emit = defineEmits(['update:modelValue'])

const {
	value: inputValue,
	handleBlur,
	handleChange,
	errors,
} = useField(toRef(props, 'name'), undefined, {
	label: props.label,
	syncVModel: true,
})

const onInput = (event) => {
	handleChange(event, true)
	emit('update:modelValue', event)
}
</script>

<template>
	<v-text-field
		:model-value="inputValue"
		:label="label"
		:error-messages="errors"
		hide-details="auto"
		:type="type"
		:clearable="clearable"
		persistent-hint
		:name="name"
		@blur="handleBlur"
		@input="onInput($event)"
		@update:modelValue="onInput($event)"
	>
		<template v-if="$slots.prepend" #prepend>
			<slot name="prepend" />
		</template>
		<template v-if="$slots.append" #append>
			<slot name="append" />
		</template>
		<template v-if="$slots['prepend-inner']" #prepend-inner>
			<slot name="prepend-inner" />
		</template>
		<template v-if="$slots['append-inner']" #append-inner>
			<slot name="append-inner" />
		</template>
		<template v-if="$slots.details" #details>
			<slot name="details" />
		</template>
	</v-text-field>
</template>

[logaretm]

Can you create a live example on stackblitz?

[codeflorist]

Can you create a live example on stackblitz?

@logaretm

Sure, no problem: https://stackblitz.com/edit/wsnaxt?file=src%2FInputText.vue

I forked your v-model example and adapted it. Many thanks for taking a look at it!

[logaretm]

Thank you. I messed up and didn't use the fallback value for the option. Will release a patch shortly, thanks for reporting it.

[codeflorist]

@logaretm You're welcome! Everything is looking good with v4.11.6. Many thanks to you for your lightning fast support and hard work on this great library!