如何将文件输入的点击功能绑定到";v-on";事件

How to bind click function of a file input to a "v-on" event?

本文关键字：quot 绑定 v-on 事件 功能 文件 输入      更新时间：2023-09-26

我试图用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的click函数绑定到mdl按钮的click事件怎么样？

您可以简单地将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>元素替换用作按钮元素的任何标记。

相关文章：