問題タブ [alpine.js]

AlpineJSで小さな todo アプリを作成していますが、ユーザーがtodo をクリックしたときにフィールドを自動選択するという問題が発生しています。この問題は、複数の Todo がある場合にのみ発生します。

ユーザーが最初の todo をアプリに入力すると、todo をクリックして編集できます。フィールドは期待どおりに自動選択されます。ただし、ユーザーがアプリに複数の Todo を追加し、n+1の Todo を編集したい場合、フィールドは自動選択されなくなりますが、最初の Todo は問題なく自動選択されます。

これが私のCodePenです。

私の編集機能は次のようになります。

JS

HTML

私のロジックの何が問題なのか、誰かが考えているでしょうか? お手伝いありがとう！

このレイアウトを取得しました。DataTables を使用してデータを処理しています (ページネーション、並べ替え、検索) - https://github.com/fiduswriter/Simple-DataTables

これらのタブの実装を管理するために AlpineJS を使用していますが、最初のページのリロード時にすべてが正常に機能し、別のタブに切り替えるとまったく機能しません。jQueryデータテーブルでも試しましたが、同じことが起こりました。

現在、バニラのJSデータテーブルにはさまざまなイベントとオプションが呼び出されていますが、私の場合はどれも機能していません。

JS みんな、手伝ってくれる？

Alpine.js を使用してフォーム データを現在のページに POST しようとしています。現在のページは、PHP $_GET によって使用され、いくつかの機能を実行します。

フォームデータではなく、応答でページ全体を返しているようです(無効なJSONであるためにエラーになります)。

送信されたフォーム データのみを応答で返すにはどうすればよいですか?