🗂
v-file-inputをボタンのみにする[Vue.js]
やりたいこと
v-file-input でファイル選択ダイアログとファイル入力欄を簡単に作れるが、このファイル入力欄UIを単純なボタンに変更する。UIをボタンにしつつ、ファイル選択ダイアログや選択後のファイルの結びつけなどはv-file-inputを利用したい。
コード
const file_input = ref<HTMLInputElement|null>(null);
const select_file = () => {
if(file_input.value){
//v-file-inputクリック時のイベントを起こす
file_input.value.click();
}
}
<v-btn @click="select_file();">ファイル選択</v-btn>
<!-- v-file-inputは非表示 -->
<!-- refをfile_inputとすることで、script側のfile_inputと結び付けてくれる-->
<v-file-input ref="file_input" style="display:none;"></v-file-input>
Discussion