linkをセットしたv-list-itemの中のv-list-item-actionにclickメソッドをセットする

更新:2021/08/27 03:24 by なす

v-listがよくわかりません。
v-list-itemというのがありますが、リストアイテムとしてv-list-item以外を使うこともできるそうです。
そうゆう関係性をよく理解できていないと、何をどう組み合わせて使えば良いのかがわからなくなります。
愚痴です;

v-list-itemに配置できるv-list-item-actionというのがあります。
actionなんだから、clickできるボタンを配置したいと思うじゃないですか、

<v-btn icon @click="openBreadcrump">

このボタンのclickイベントは正常に動作します。
ですが、v-list-itemにリンクを設定していると、そのリンクイベントも発生してしまいます。
うむむ、
この問題について、vuetifyはなにも関知はしないらしいです。
なので、イベントのバブリングを抑制するコードが必要になります。

<v-btn icon @click.prevent="openBreadcrump" @mousedown.stop @touchstart.native.stop>


このことから、v-list-item-actionは、単に表示位置を表す言葉で、中に配置するものには何も制限はないのでしょう。
まあそうなのでしょうが、まだまだ思想に慣れてこないです。

親ノート

UIフレームワークに慄く 更新:2021/06/14 23:29 by なす