如何将文件输入的点击功能绑定到“v-on”事件？

Question

我试图在 Vue.js 中编写一个漂亮的上传器。我只是隐藏 <input type="file"> 元素并在单击 mdl 按钮时触发单击功能。

以下代码是我的实现。

模板：

<form method="post" action="#" @submit.prevent="">
  <input id="fileInput" type="file">
  <mdl-button type="submit" @click="onClick" colored raised>
    <span>Upload</span>
  </mdl-button>
</form>

脚本：

export default {
  data () {
    return {
      filePath: null
    }
  },
  methods: {
    onClick: function (e) {
      document.getElementById('fileInput').click()
    }
  }
}

风格：

#fileInput {
  display: none;
}

我们可以注意到document.getElementById 不是 Vue 风格的。

如何将fileInput的点击函数绑定到mdl-button的点击事件？

Answer 1

您可以简单地将您的mdl-button 变成<label> 标签。这将使它在语义上更有价值和更易于访问：

<form method="post" action="#" @submit.prevent="">
  <input id="fileInput" type="file">
  <mdl-button type="submit" colored raised>
    <label for="fileInput">Upload</label>
  </mdl-button>
</form>

我不确定您的 <mdl-button> 组件包含哪种标记，但您可能只想将用作按钮元素的任何内容替换为 <label> 元素。