在 Vuejs 问题中使用按钮输入文件

Question

我正在尝试使用一个按钮来触发输入文件。但是我在这里面临的问题是，每当我单击按钮时，它都会将我带到 http://localhost:3000/availability?vue-file-input= url 而不是打开文件选择器。请帮我找出哪里出错了。

<div class="vue-file-wrapper">
 <button class="vue-button" @click="document.getElementById('fileInput').click()">Choose&nbsp;File
 </button>
 <div>{{ filename }}</div>
 <input
   type="file"
   ref="file"
   style="display:none"
   name="vue-file-input"
   id="fileInput"
   :disabled="user.availability"
   @change="onFileSelected"
 >
</div>

Answer 1

使用 Vue Refs 而不是查询 DOM，这应该可以正常工作：

<div class="vue-file-wrapper">
  <button class="vue-button" @click.prevent="$refs.file.click()">Choose&nbsp;File
  </button>
  <div>{{ filename }}</div>
  <input
    type="file"
    ref="file"
    style="display:none"
    name="vue-file-input"
    id="fileInput"
    :disabled="user.availability"
    @change="onFileSelected"
  />
</div>

这是显示它有效的 jsfiddle：https://jsfiddle.net/Lgc5rnzs