問題タブ [alpine.js]

私は、tailwind と alpine js で作成された日付ピッカー コンポーネントを持っています。これを日付ピッカーへの参照として使用しました。私の問題は、小さなデバイスを使用している場合のモバイルの応答性です。日付ピッカーが下部の残りのスペースにオーバーフローします。下部にスペースがないときに上がるスマートなドロップダウンのように追加する方法はありますか?

小さいデバイスではメディア クエリも入れてみましたが、私のニーズには合いませんでした。

単純なアルパイン フォーム パーツで選択したオプションに問題があります。私の選択ボックスは、API から値を取得します。x-model はフェッチの前に設定されます。選択ボックスには、選択された正しい値が表示される場合と表示されない場合があります。フェッチ後に値を設定しても、選択したオプションは (常に) 選択されません。常に正しい選択値が設定されていることを確認するにはどうすればよいですか?

注: selectbox 2 の値は、最初に設定された値によって異なります。ただし、両方が設定されている場合は、valueA と valueB で指定された正しい選択値を両方とも表示する必要があります。

これが私の機能です

これはhtmlです

私は追加しようとしています:

https://github.com/lipis/flag-icon-css

誰かがマップボックスの国をクリックしたときにフラグを表示できるように、アプリに

これを行う方法をお勧めする方法はありますか？

私は次のことを試しましたが、私は得るTypeError: (void 0) is undefined

編集：マップ上のクリック機能の中に私はこれを持っています：

多分私は試すことができます：

しかし、私はそれをどこに置くべきかわかりません。

これは機能しますが、Alpine.js ソリューションの方が簡潔だと思います。