javascript - 使用 Vue.js 将文件输入绑定(bind)到按钮

Question

我正在尝试使用 Vue.js 将输入文件绑定(bind)到按钮
具有以下内容:

<input type="file hidden>
<button>Choose</button>

在 JQuery 中会是这样的:

$('button').click(function() {
    $('input[type=file]').click();
});

所以，这样做是将按钮上的点击事件绑定(bind)到输入文件，这样我就可以完全控制按钮的外观，它甚至可以是 anchor 或图像或任何元素来触发事件到输入。

我的问题是:如何使用 Vue.js 完成此操作？

谢谢!

Answer 1

你可以这样做:

HTML:

<input id="fileUpload" type="file" hidden>
<button @click="chooseFiles()">Choose</button>

Vue.js:

methods: {
    chooseFiles: function() {
        document.getElementById("fileUpload").click()
    },
...

编辑 - 更新语法:

methods: {
    chooseFiles() {
        document.getElementById("fileUpload").click()
    },
...