Nuxt+Zod中file输入框首次选文件或切换类型不显示文件名问题

• 基于Nuxt+VueJS+Zod开发表单验证项目，包含type="file"的输入字段
• 首次选择文件、切换不同类型文件时，输入框不显示文件名，但state.file已正确更新，Zod验证正常执行
• 选择同类型文件（无论是否为同一文件）时，文件名能正常显示

相关代码 #

<template>
  <UForm :state="state" :schema="schema" @submit="onSubmit" class="space-y-4">
    <UFormGroup label="File:" name="file">
      <UInput type="file" @change="onSelectFile"/>
    </UFormGroup>
    <UButton type="submit">Submit</UButton>
  </UForm>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { z } from 'zod';

function onSelectFile(files: FileList) {
  state.file = files[0];
}

const state = reactive({
  file: undefined,
});

const schema = z.object({
  file: z.any()
    .refine(() => state.file?.name.split('.').pop() === 'png', 'Must be .png'),
});

function onSubmit() {
  console.log(state);
}
</script>

临时解决方案（希望避免） #

添加额外ref做双向绑定可解决问题，但不想依赖该临时方案：

<UFormGroup label="File:" name="file">
  <UInput type="file" @change="onSelectFile" v-model="fileName"/>
</UFormGroup>

const fileName = ref();

问题核心在于UInput组件与表单state的同步逻辑：

1. 使用UForm的:state绑定响应式对象时，UInput依赖表单state的变化更新自身显示
2. 首次选择/切换文件类型时，虽然手动更新了state.file，但UInput内部未正确监听File对象的全新引用变化；而同类型文件的选择可能触发了组件内部的缓存判断或更新逻辑，因此能正常显示
3. Zod验证直接依赖state.file所以正常执行，但UInput未与state.file做正确双向绑定，导致视图未同步

方案1：直接双向绑定state.file #

修改UInput的绑定方式，让Vue自动处理文件选择后的state更新与视图同步，同时去掉手动的onSelectFile方法：

<UFormGroup label="File:" name="file">
  <UInput type="file" v-model="state.file"/>
</UFormGroup>

方案2：手动触发响应式更新（保留onSelectFile时） #

如果需要保留自定义的onSelectFile逻辑，可以通过先清空再赋值的方式强制触发响应式更新，确保UInput感知到变化：

function onSelectFile(files: FileList) {
  state.file = null; // 先清空触发响应式变化
  state.file = files[0];
}

也可以配合nextTick确保视图同步：

import { nextTick } from 'vue';

function onSelectFile(files: FileList) {
  state.file = files[0];
  nextTick(() => {
    // 确保UInput有足够时间感知state变化
  });
}

方案3：优化Zod验证逻辑 #

当前Zod的refine直接依赖外部state.file不够规范，改为使用字段自身的值做验证，同时配合双向绑定让表单状态更一致：

const schema = z.object({
  file: z.instanceof(File)
    .refine((file) => file.name.split('.').pop() === 'png', 'Must be .png'),
});

内容的提问来源于stack exchange，提问作者kyljmeeski