javascript - 如何将文件输入的点击函数绑定(bind)到 "v-on"事件？

Question

我尝试在 Vue.js 中编写一个漂亮的 uploader 。我只是隐藏<input type="file">单击 mdl-button 时元素并触发单击功能。

以下代码是我的实现。

模板:

<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 的点击函数绑定(bind)到 mdl-button 的点击事件怎么样？

Answer 1

您只需将您的 mdl-button进入<label>标签。这将使其在语义上更有值(value)且更易于访问:

<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>元素。