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

【问题标题】：How to prepopulate a Vuetify v-file-input field with text?如何用文本预填充 Vuetify v-file-input 字段？
【发布时间】：2022-11-21 08:22:29
【问题描述】：

是否可以在用户可以上传文件的编辑屏幕上使用 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>

【问题讨论】：

使用 prepend-inner 插槽？

标签： vue.js vuetify.js

【解决方案1】：

正如 Yits 在 cmets 中所建议的那样，您可以使用 prepend-inner 插槽。如果文件已经存在以实现目标，我会在动态更改标签属性文本时使用它。

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

【讨论】：

【解决方案2】：

解决方法：

DOM：

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

CSS：

/**/
.v-file-input label {
    /**/
    transform: translateY(-6px) scale(.75) !important;
    /**/
}

记者：

/**/
new Vue({
    /**/
    el: "#app",
    /**/
    vuetify: vuetify,
    /**/
    data: () => ({
        /**/
        default: {
            /**/
            name: null,
            /**/
            size: null,
            /**/
        },
        /**/
        file: null,
        /**/
    }),
    /**/
    updated(){
        /**/
        $(".v-file-input").find(".v-file-input__text").html(this.file ? `<div>${this.file.name} (${this.readableBytes(this.file.size)})</div>` : this.default.name ? `<div>${this.default.name} (${this.readableBytes(this.default.size)})</div>` : "");
        /**/
    },
    /**/
    methods: {
        /**/
        readableBytes: function(x){
            /**/
            const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
            /**/
            var i = 0, n = parseInt(x, 10) || 0;
            /**/
            while(n >= 1024 && ++i){
                /**/
                n = n / 1024;
                /**/
            }
            /**/
            return n.toFixed(n < 10 && i > 0 ? 1 : 0) + " " + units[i];
            /**/
        },
    }
});

【讨论】：