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 なす |
秩序
Nuxtはアプリケーションをパーツに分解して作成しますが、作成したパーツを保存する場所が決められています。
その部品に追加するメソッドにも居場所が決められています。
整理整頓のルールが明確に決められています。
最初に場所が用意されているので何を作っていくのかの見通しができます。
なにを作成してどこに保存するのか迷うことがありません。
決められたルールが提供されるのは幸せです。
苦労して自分で作成しなくて済みますし、自己流で失敗するだろう不安もありません。
良くできたルールに従うのは気持ちよいです。
ルールを覚える時間は必要ですが、慣れてしまえば作業もはかどりそうです。
調和
Nuxtはあくまでフロントエンドツールで、バックエンドを作成することはできません。
もしWebサイトをひとつ作成するなら、おそらくはバックエンドも必要でしょう。
従来、フロントエンドとバックエンドを同じサイトでサービスするのは普通でした。
一方でサーバーの仮想化が進み、バックエンドは今では完全にサーバーレスで構成することができるようになりつつあります。
それで、フロントエンドとバックエンドの役割分担を潔くきれいに完全に分けましょう！ということだと思います。
大きなものを大きなまま作ることはできないので機能を分割し役割分担が必要です。
しかし、ただ機能を分割しただけで覚悟が不足していれば、依然役割が曖昧でべたべたした関係が生まれることはよくあります。
対して、Nuxtのまわりをとりまくサービス群には、より小さく固い分業の機動性と調和を感じます。
時代
NuxtはWebアプリケーションを作成するときに選択可能なフレームワークのひとつですが、
従来からあるMVCのようなフレームワークを完全に置換できるものではありません。
適用できる領域に制約はあるでしょうし、適材適所で選択は必要です。
その状況であれば一気に何か変わるということはないでしょう。
変化を望むか／安定を望むかは自分がおかれた立場でそれは変わりますし、
変化と安定、どちらにも長所／短所はあり、どちらが正解ということでもありません。
ただ、いつも小さな変化がやってきて、気づいたときにはいつのまにかすっかり変わってしまった時代に驚くのです。
Nuxtもまたその兆しでしょう。吹いている風に次の季節の訪れを感じます。