Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I want to submit a form if the file is changed (in this specific case it's the only value in the form).
const form = useForm({
file: null
});
watch((form), (form) => {
form.post(route('users.import'));
}, { deep: true });
The above results in an infinite loop (because the .isProcessing value is changed).
Watching only the file property, like so:
const form = useForm({
file: null
});
watch((form.file), (form) => {
form.post(route('users.import'));
});
Doesn't work, the callback is never fired.
This
form is a reactive object and what you did above is watching on a File | null variable (not a ref).
What you should do is mentioned in Vue 3 documentation: https://vuejs.org/guide/essentials/watchers.html#watch-source-types
watch(
() => form.file, // use a getter like this
(file) => {
console.log('file changed', file);
form.post(route('users.import'));
}
)
@Niush Worked like a charm. Thank you so much!
The solution works great for single field watching, but what about watching all fields in the form? I am experiencing the infinite loop issue too, but I have a lot of fields so I don't want to watch each one individually.
@stuartcusack Maybe this will help you, I was also trying to figure out how to watch all fields in the form, but eventually I used form.isDirty instead and it worked for me in my use case
How about watchEffect?
watchEffect(() => {
// Trigger the submit method whenever any of the specified properties change
if (form.field1 || form.field2 || form.field3) {
submit() // do something
}
})
You can't watch a reactive object directly, you need to use a reactive getter. This worked for me:
watch(
() => form,
() => {
something();
},
{ deep: true },
);
Please or to participate in this conversation.