Vue 3 手表功能不更新

Question

我正在尝试根据 HTMLInputElement 的状态更新变量，但是 watch 方法不会对输入字段的更改做出反应。

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"/>

我尝试使用计算属性并使用

watchEffect()

但两者都不起作用。

Answer 1

这不是响应式在 Vue 中的工作方式。对 DOM 元素的引用不会触发监视。我建议使用更改处理程序：

<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>

Answer 2

您应该使用

filename

简单地将

v-model

与您的输入字段绑定

<input type="file" class="hidden" v-model="input" />