Laravel Livewire и Alpine.js запутанная переменная не синхронизирована

#laravel #laravel-livewire #alpine.js

#laravel #laravel-livewire #alpine.js

Вопрос:

Я сталкиваюсь со странным поведением запутанной переменной. Вот самый простой пример из возможных.

В моем компоненте Livewire:

 public $myBoolValue = false;
 

В моем представлении блейда:

 <div x-data="{toggle: @entangle('myBoolValue')}">
    <label>
        <input type="checkbox" @click="toggle = ! toggle"/>
    </label>
    <p>Livewire: {{ var_export($myBoolValue) }}</p>
    <p x-text="['Alpine.js: ' toggle]"></p>
</div>
 

Вот что происходит:

введите описание изображения здесь

После обновления страницы кажется, что первый щелчок работает правильно:

 false -> check -> true -> OK
 

После этого myBoolValue синхронизация прерывается каждые 3 клика:

 true -> uncheck -> true -> WRONG
true -> check -> true -> OK? (dont know if it is in sync or just staying as it is)
true -> uncheck -> false -> OK
 
 false -> check -> false -> WRONG
false -> uncheck -> false -> OK? (dont know if it is in sync or just staying as it is)
false -> check -> true -> OK
 

Я не понимаю, что я делаю неправильно.


ОБНОВЛЕНИЕ: вероятно, ошибка в Livewire v2.3.2


ОБНОВЛЕНИЕ 2: подтверждено, что это была ошибка в Livewire версии 2.3.2, и подтверждено исправление в Livewire версии 3.4

Комментарии:

1. Только что протестировано и, похоже, работает нормально. Это может быть проблема с сетью. Если вы посмотрите на вкладку Сеть в devtools, как быстро выполняется запрос, который Livewire отправляет для обновления myBoolValue свойства?

2. В локальной среде это занимает ~ 55 мс. Но я нашел эту открытую проблему github.com/livewire/livewire/issues/2064 что, вероятно, тоже влияет на меня, так как я работаю над Livewire v2.3.2. Кажется, что второй и третий запросы не отправляются на сервер (на вкладке «Сеть» запрос не отображается). Какую версию Livewire вы использовали для тестирования этого?

3. Ах, интересно, да, я на версии v2.3.1. Возможно, стоит отменить это, пока проблема не будет решена.