Nuxt.jsでwebアプリを作る際にVuetifyを利用しているのですが、v-input-fileでplaceholder(label)の部分をクリック(タップ)しても、@changeが動作しないバグに遭遇したので、回避法を紹介します。
label部分をタップしても正常に@clickが動作しない
状況
|
1 2 3 4 5 6 7 |
<v-file-input small-chips label="プロフィール画像" ref="fileInput" v-model="hoge" @change="changeMethod" > |
↑のような、v-file-inputをクリックすると、プロフィール画像がアップロードできるようなフォームを作ったのですが、
【プロフィール画像】
というlabelの上をクリックすると、正常にchangeMethodが呼び出されないという現象でした。
原因
clickイベント時のeventで取得するDOMが異なる。
labelとそれ以外をクリックしたときにeventで取得するDOMが異なることが原因のようです。
直し方
labelをクリックしたときに、他の部分と同じDOMを取得すればよいので、
|
1 2 3 |
.v-file-input__text.v-file-input__text--chips { z-index: 10; } |
↑のコードをcssに追加すれば直ります！
z-indexを調整して、labelの上に、正しいDOMをかぶせるイメージです！
