前回の投稿でchoices.jsを使う方法を書いたのですが、その前に自分が作業していたものがあって…… select2です。 問題なくうまく動作する。ただしdefer機能は使えない。 必ず、selectしたときに、livewire callを通じてデータを保存しなければならない。 その問題はentangleがarray
前回の投稿でchoices.jsを使う方法を書いたのですが、その前に自分が作業していたものがあって……
select2です。
<div
wire:ignore>
<select
{{-- x-data="{ amount: $wire.entangle('stones.{{ $key }}.stone_id').defer, anElement: null }"--}}
x-data
x-init="$nextTick(() => {
$($el).select2({ width: '100%' });
$($el).val(@this.stones[{{$key}}]['stone_id']).trigger('change');
$($el).on('select2:select', function (e) {
@this.call('setStones', {{$key}}, e.params.data.id);
});
});"
class="block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 text-xs"
x-ref="select">
<option value=''>선택</option>
@foreach($stone_list as $value2)
<option value="{{$value2['id']}}">{{$value2['name']}}</option>
@endforeach
</select>
</div>問題なくうまく動作する。ただしdefer機能は使えない。
必ず、selectしたときに、livewire callを通じてデータを保存しなければならない。
その問題はentangleがarrayで正しく動作しないためで、柔軟性を持たせなければならない部分でエラーが出た。
そこで私が問題を提起した。
結果として改善された。（もちろん、この記事を書いた時点ではアップデートは適用されておらず、テストもできていないけれど）
さらに、entangleの別の問題点も解決された。
joshhanley ユーザーは本当にすごいと思う……問題を解決できずにいた箇所のコアを見つけて修正し、プルリクエストを出してテストまで通した。（不思議だったのは、テストファイルも作って一緒にアップし、GitHubで問題がないかすべてのコードについてテストを実施して、合格しなければならないということも不思議だった。これがまさにテストファイルを書きながらコーディングするあの方法なのだろうか？重要なコアや大規模なプロジェクトには必須の要素だと思う……でもテストファイルを一つ一つ作りながら進めるのも時間がかかることだから……私はとりあえずパス）
entangleの問題点を修正したバージョンにlivewireが早くアップデートされるのを待っている。