🗂

v-file-inputをボタンのみにする[Vue.js]

2023/11/28に公開

やりたいこと

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