隐藏时如何打开组件 v-file-input？

Question

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?

Answer 1

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>