Vue 3 watch function not updating

Question

i'm trying to update a variable on the status of a HTMLInputElement, but the watch method doesn't react on a change from the input field.

const input = ref<HTMLInputElement | null>(null)
const filename = ref("Foo")

watch(() => input.value?.files, (first) => {
    console.log(input.value?.files?.item(0)?.name, filename.value, first)
})

<div>
   {{ filename }}
</div>
<input type="file" class="hidden" ref="input"/>

I tried to use a computed property and to use watchEffect() but both didn't work.

Answer 1

This is not how reactivity works in Vue. The ref to a DOM element does not trigger a watch. I suggest to use a change handler:

<script setup>
const fileName = ref("Foo");

const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
        fileName.value = e.target.files[0].name;
        console.log(fileName.value);
    }
}
</script>
<template>
    <div>
       {{ filename }}
    </div>
    <input type="file" class="hidden" @change="handleFileChange($event)"/>
</template>