如何用文本预填充Vuetify v-file-input字段

Question

是否可以在用户可以上传文件的编辑屏幕上使用Vuetify v-file-input组件。上传文件时，我们会保存文件名。当再次打开编辑屏幕时，我们希望在v-file-input组件中输入文件名，以表明已经上传了一个文件。我们如何才能做到这一点？

实现这一目标的措施包括：

• 将v-model设置为文件名(名称不会显示在输入字段中(
• 将占位符属性与文件名一起使用(不起作用(

输入示例：

<!-- ID Upload -->
<v-file-input
outlined
dense
accept="image/*"
label="Upload ID / Passport (Certified)"
:rules="[v => !!v || 'ID / Passport is required']"
@change="onNewFileUpload"
></v-file-input>

Answer 1

正如Yits在评论中建议的那样，您可以使用前置内部插槽。我在基于文件已经存在的情况下动态更改标签属性文本以实现目标时使用了这一点。

<v-file-input
outlined
dense
accept="image/*"
:label="fileInputLabel"
:rules="[v => !!v || 'ID / Passport is required']"
@change="onNewFileUpload">
<template v-if="executive.id_doc" #prepend-inner>
{{executive.id_doc.fileName}}
</template>
</v-file-input>