【Vue.js Nuxt】Vuetifyのv-file-inputが動作しないバグの修正方法

Nuxt.jsでwebアプリを作る際にVuetifyを利用しているのですが、v-input-fileでplaceholder(label)の部分をクリック(タップ)しても、@changeが動作しないバグに遭遇したので、回避法を紹介します。

label部分をタップしても正常に@clickが動作しない

状況

 

 

↑のような、v-file-inputをクリックすると、プロフィール画像がアップロードできるようなフォームを作ったのですが、

【プロフィール画像】

というlabelの上をクリックすると、正常にchangeMethodが呼び出されないという現象でした。

原因

clickイベント時のeventで取得するDOMが異なる。

labelとそれ以外をクリックしたときにeventで取得するDOMが異なることが原因のようです。

直し方

labelをクリックしたときに、他の部分と同じDOMを取得すればよいので、

↑のコードをcssに追加すれば直ります!

z-indexを調整して、labelの上に、正しいDOMをかぶせるイメージです!

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!