如何在不使用vue/javascript中的event.target的情况下显示上传的zip文件的名称

Question

我有一个输入，它接受文件类型并接受特定的zip文件。一旦zip文件被动态上传到相关的输入标签中，我想显示它的名称。现在我可以使用一个方法检索文件名，但它需要输入event。当我收到以下错误时，尝试动态呈现文件名时失败了：

app.js:164890 [Vue warn]: Error in render: "TypeError: Cannot read property 'target' of undefined"

如果我在调用{{fileName(e)}}时通过了e，那么我会得到这个错误

[Vue warn]: Property or method "e" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

这是我的HTML标签：

<input
id="zip"
name="zip"
type="file"
accept="application/zip"
required>

<label for="zip">{{fileName()}}</label>

Vue方法

fileName(e) {
return e.target.files[0].name ? return e.target.files[0].name : 'Choose File';
}

Answer 1

您可以通过事件处理程序监听输入的change事件，并在用户每次选择文件时检索文件名。

new Vue({
el: "#app",
data: {
fileName: "Choose File",
},
methods: {
fileSelected: function(e){
this.fileName = e.target.files[0].name;
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
id="zip"
name="zip"
type="file"
accept="application/zip"
required
v-on:change="fileSelected">

<label for="zip">{{fileName}}</label>
</div>