vueで脳を使う

晴れvueで画像アップロードの部分のコンポーネントを作っていたのだけど、かなり苦労した。
ファイルを選択したら、プレビュー領域に画像内容を表示。 プレビュー画像にオーバーレイで表示されている×ボタンをクリックすると、プレビューから削除&画像アップロードのファイル選択からも削除。
それ自体は苦労せずに出来たのだけど、親ページに状態を伝えるのに苦労した。 画像選択部分は、
emit(‘update’, modelValue)
みたいな感じでできるのだけど、v-modelで管理できていない他の部分について。 これは親から子へメソッドをバインドして、子で親メソッドを実行するような感じで、とりあえずはできた。
このシステムはInertia.jsを使っているので、post後に再読み込みをしない。 そのため、画像選択部分がそのままなので、postに成功した場合に選択内容をクリアする、という処理も必要だった。 一番苦労したのがこの部分で、子から親のメソッドを呼び出すのはサンプルがたくさんあったが、親から子のメソッドを呼び出す方法が全然書かれておらずに、できるようになるまでに、非常に苦労した。
親からは
hensu.value.aaaaa()
のように呼び出し、
子に
defineProps: [‘aaaa’]
みたいに定義して、
setupの中で
const aaa = () => {
内容内容
}
としたら実装できた。

ただ、本当に苦労したのは、これのinputにmultipleのついている、複数ファイル選択対応版だった。
そちらは、3枚画像選択したとしたら、2枚目だけやっぱりアップロードやめる、というような物を実装するのが大変だった。

日中非常に頭を使ったので、夜のジョギングは行きたくないなぁと思った。 今日はレース前最後の閾値走なのでメニューもきついし。
だが、明日だと日曜日の大会まで疲れが抜けるか微妙なので、今日やっておかなくてはならない。
内容はアップとダウンがキロ5分15秒ペースで10分間ずつ。 閾値走はキロ4分10秒ペースで18分間。 キロ4だと4.5km走ることになるので、それに近いくらいの距離をかなり頑張って走らないといけない。 先日の丸亀ハーフでそのスピードで21km走れてはいるが、レースと練習では訳が違う。 今日は非常に厳しい練習になる。
アップとダウンは卒なくこなし、いざ閾値走へ。
最初の1kmは4.06、次は交差点で車とのタイミングが合わず一瞬止まってしまった影響もあったのか、4.15とタイムを落とす。 次で上げなくてはと思ったが、スタートしてからずっと上り勾配の区間なんでスピードが上がらず4.09。 ここから下り勾配になるので、落としたタイムを回収すべきスピードを上げて3.57。 ガーミンに速すぎると怒られたのでラストは少しペースを落として4.02で380m走ったところで時間が来た。
まぁいい内容だったのではないだろうか。
全体を慣らすと
4.57, 4.58, 4.05, 4.15, 4.09, 3.57, 4.37, 4.58, 4.56と、8.4kmを38分05秒で、キロ4分31秒ペースだった。