livewire 에 select2 사용하기

Updated on 2020-12-28

이전 포스팅에 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 에서 제대로 작동안하기 때문인데, 유연성을 주어야하는 부분에서 에러를 나타냈다.

https://github.com/livewire/livewire/discussions/2191

그래서 내가 문제 제기했고.

https://github.com/livewire/livewire/pull/2224

결과적으로 개선되었다. (물론 포스팅 작성 시간을 기준으로 업뎃은 적용되지 않았고, 테스트도 못해보긴 함)

추가적으로 entangle 의 또 다른 문제점도 해결되었다.

https://github.com/livewire/livewire/pull/2251

joshhanley 유저는 정말 대단한것 같다.. 문제로 해결하지 못했던 부분의 코어를 찾아서 수정하고 pull 요청해서 테스트까지 통과했다. (신기한건, test 파일도 만들어서 같이 올려서 github 에서 문제가 없는지 모든 코드에 대한 test 를 진행해서 통과해야만 한다는게 신기했다. 이게 바로 test 파일을 작성해가면서 코딩하는 그 방법인가? 중요한 코어나 큰 프로젝트에는 필수적인 요소일 것 같다.. 하지만 test 파일을 일일히 만들면서 해가는것도 시간이 오래걸리는 문제니까… 난 일단 pass)

어서 빨리 livewire 가 entangle 의 문제점들을 fix한 버젼으로 업뎃하기를 기다리고 있다.

livewire 에 select2 사용하기

다른 글