状況

このようにv-checkboxを利用し、v-iconをその中に設置したいというケースはよくあると思われる。
そして一番上の要素の上矢印はクリックできないようにするという仕様。

v-checkboxでラベルの一番右まで対象になってしまっているため、何もしないとv-iconをクリックしたときに同時にcheckboxも反応してしまう。

この問題の対処法としては

mdi-arrrow-down

のようにstopイベント修飾子で対応可能。

だが！！
画像の左アイコンは同様にclick.stopを利用してもpropsにdisabledを指定しているため、アイコンのクリックが行えず(これは問題ない)、チェックボックスが反応してしまう。

ここで少々詰まった。

…


全文はこちら：v-checkboxのラベル上にdisabledのv-iconを設置し、イベントが伝播しないようにする
著者：@yutoun