How to open component v-file-input, when it is hidden?

user_14008988 0
Viewed 222

I need to use component v-file-input for upload file. But this component not suitable for design.

I try do next. I made this component whole hidden <v-file-input hide-input prepend-icon=""></v-file-input>. Also I made a button, design I need. But I can not start component v-file-input in method by click the button.

How can I start this component in the method?

vuejs2 vuetify.js vue.js javascript
1 Answers

You can try to make label as button, and call method on label click:

.upload {
  margin: 2em;
}
#btn {
  border: 2px solid #3457D5;
  border-radius: .5em;
  padding: 1em;
  cursor: pointer;
}
#btn:hover {
  background: #3457D5;
  color: white;
}
<div class="upload">
  <input id="up" type="file" style="display: none" />
  <label id="btn" for="up">Upload</label>
</div>

user_119891890
Related