Windowsアプリ開発エンジニアがWebアプリ開発を頑張ってみた①

こんにちは。
オアシステクノロジーズの中村です。

Windowsアプリ開発から最近Webアプリ開発に転向しつつあり、Webアプリ開発で悩んだことを記事にしよーと思います。
当たり前だけどソースコードはフィクションですｗ

こんな感じでやればもっとよくできる等あれば教えてくださいm(__)m

今回の対戦相手：Tabelタグ内のデータを１レコードごとにダイアログで更新したい
　　　　　　　　（テーブルレコードは追加したり削除したり可能）

とまぁこのような要望、画面レイアウトがお客様から来たわけですよ。

これまで：Tableタグのデータをごそっとバックエンドに送って更新
新仕様：Tableタグのデータを１件ずつ編集できるようにする
つまり対戦決定！！！

２か月程前に実装し、試したソースコードは残っていないので雰囲気だけ伝えます。

〇試したこと①
Tableにボタンを作成し、共通なダイアログコンポーネントを作って、ボタン押下時にダイアログを表示させる

同アプリの別画面で似たようなことをしていたわけです
（一部抜粋）

コンポーネント呼び出し側

<x-modal-search-samples
  :id='"samples-search-$id"'
  :targetSelector='"#samples-$id-id"'
  :targetRemarksSelector='"#samples-$id-remarks"'
  :targetUpdatedAtSelector='"#samples-$id-updated_at"'
></x-modal-search-samples>

コンポーネント側

<x-button-secondary label="サンプル" id="" class="btn h-100 w-100 btn-open" data-bs-toggle="modal" data-bs-target="#{{$id}}">
</x-button-secondary>
<div class="samples-search-modal h-100 w-100" 
    data-target-id="{{$targetSelector}}" 
    data-target-remark="{{$targetRemarksSelector}}" 
    data-target-update_at=" {{$targetUpdatedAtSelector}}" >

ふむふむ・・・。
呼び出し側でidを設定すると、コンポーネント側でidのvalueを引き渡すことができるのか・・・？

やってみよう！！！
　↓
　↓〇日後
　↓
できねぇ！！！
そしてできない理由もわからず・・・
納期もあるので、この案はやめて案②へ

〇試したこと②
テーブルを作るときはリストをループしてデータを設定してるので、ダイアログにも同様のデータを設定すればできんじゃね？
新しいダイアログの作成も必要か・・・その時はボタンから空のダイアログを表示してデータを登録できるようにすればいっか。

イメージ抜粋

<button>新規データを追加するボタンの設置</button>
foreach (tableのデータ) {
    ~tableにデータを設定~
        tableタグに値を設定する
        modalを呼ぶボタンも設定
    　    →modalとidを合わせる
    ~modalに値を設定~
        modalに値を設定する
          →idをtableのmodal呼ぶボタンと合わせる
}
新規データ登録用のmodalを記述

こちらで上手くいきました。
いや正確にはレコードのデータを一件ずつダイアログに表示することができるようになりました。
ダイアログに登録ボタンがあるけど、そこで更新しても１件ずつの更新は上手くいかず・・・

その解決は次の記事にて！！！

P.S. フロント難しい！！！