Inertia Vue3（Composition API）：通过按钮触发文件输入框点击事件

问题场景 #

使用Vue3 Composition API（Laravel环境），尝试通过自定义按钮触发隐藏的文件输入框点击事件，但运行时出现错误：Cannot read properties of null (reading 'click')，希望用Vue原生方式实现，而非document.getElementById。

原代码问题分析 #

1. ref绑定错误：模板中文件输入框使用了:ref="videoInput"动态绑定，对于单个静态DOM元素，应该使用静态ref="videoInput"来绑定到响应式变量。
2. 手动清空ref引用：selectVideo方法中videoInput.value = null会直接破坏Vue维护的DOM元素引用，导致后续无法获取到输入框节点。

修正后的代码 #

<template>
    <div>
        <PrimaryButton
            type="button"
            :for="props.videoId"
            :disabled="uploading"
            @click="selectVideo"
        >
        Upload
        </PrimaryButton>
        <input
            :hidden="true"
            ref="videoInput" <!-- 修正：去掉动态绑定的: -->
            :id="props.videoId"
            type="file"
            @change="handleVideoLoad"
            :disabled="uploading"
        />
    </div>
</template>

<script setup>
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { nextTick, ref } from "vue";

const props = defineProps({
    videoId: {
        type: String,
        default: () => "video-id",
    },
});
const uploading = ref(false);
const videoInput = ref(null);
const videoUrl = ref("");

const selectVideo = async () => {
    // 移除手动清空ref的代码
    await nextTick(); // 确保DOM已更新（可选，若元素始终存在可省略）
    videoInput.value?.click(); // 使用可选链避免null报错
};
const handleVideoLoad = (event) => {
    // 原业务逻辑代码
};
</script>

关键说明 #

• ref绑定规则：单个静态DOM元素的ref直接用ref="变量名"，Vue会自动将DOM节点赋值给对应的响应式ref变量；动态ref（:ref）多用于循环生成的元素，需要绑定字符串类型的ref名称。
• 避免手动修改ref.value：Vue会自动维护ref与DOM元素的关联，手动将ref.value设为null会打破这种关联，导致无法获取到DOM节点。
• 可选链保护：使用videoInput.value?.click()可以在元素未加载完成时避免报错，提升代码健壮性。

内容的提问来源于stack exchange，提问作者Mr. Kenneth