В приложении Laravel 10/livivewire 3/tailwindcss 3 мне нужно создать несколько динамических флажков, где пользователь может выбрать несколько элементов, и я определил их в компоненте:
namespace App\Livewire;
use App\Enums\ReactionActionEnum;
use App\Enums\AppImageUsedInSubscriptionEnum;
use Livewire\Component;
class UserReaction extends Component
{
public int $id;
public string $dataType;
public array $reactionActions = [];
public function mount(int $id, string $dataType)
{
$this->id = $id;
$this->dataType = $dataType;
$reactionActions = ReactionActionEnum::getSelectionItems();
$this->reactionActions = [];
foreach ($reactionActions as $key => $label)
$this->reactionActions[] = [
'key' => $key,
'label' => $label,
'checked' => false,
];
}
public function render()
{
return view('livewire.user-reaction');
}
public function updated($key, $value)
{
\Log::info(varDump($key, ' -1 updated $key::')); // THIS METHOD IS NOT EVEN CALLED
\Log::info(varDump($value, ' -1 updated $value::'));
}
}
и в блейд-файле:
$reactionActions:: {{ print_r($reactionActions, true) }}
@foreach($reactionActions as $reactionAction)
<div class = "relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<label for = "reaction_actions">{{ $reactionAction['label'] }}</label>
<input type = "checkbox" wire:model = "reactionActions.{{ $reactionAction['key'] }}" name = "reaction_actions" value = "{{ $reactionAction['key'] }}">
</div>
@endforeach
Я ожидал, что при нажатии флажка проверенное свойство массива $reactionAction будет изменено и/или будет вызван обновленный метод. Но этого не произошло.
Как я могу заставить его работать?
ОБНОВЛЕННЫЙ КОД:
Переменная $reactionActions создается на основе перечисления:
$reactionActions = ReactionActionEnum::getSelectionItems();
$this->reactionActions = [];
foreach ($reactionActions as $key => $label)
$this->reactionActions[] = [
'key' => $key,
'label' => $label,
'checked' => false,
];
\Log::info(varDump($this->reactionActions, ' -1 $this->reactionActions::'));
и проверяя информацию об отладке, я вижу, что проверенное отображается как пустая строка (тип коробочки потерян >) :
Array
(
[0] => Array
(
[key] => 1
[label] => Like
[checked] =>
)
[1] => Array
(
[key] => 2
[label] => Love
[checked] =>
)
[2] => Array
(
[key] => 3
[label] => Dislike
[checked] =>
)
[3] => Array
(
[key] => 4
[label] => Hate
[checked] =>
)
Я использовал ".live": у меня другая ошибка:
Та же ошибка с некомментированной меткой
Я не уверен, нужно ли мне использовать ключ «проверено»:
<input type = "checkbox" wire:model.live = "reactionActions.{{ $reactionAction['checked'] }}" name = "reaction_actions" value = "{{ $reactionAction['key'] }}">
Но я получил ту же ошибку.






В Livewire 3 провод:модель по умолчанию отложен. Чтобы разрешить контекстный ответ, вы можете использовать вместо этого Wire:model.live.
Чтобы цикл работал правильно, также необходим провод:key со значением уникального ключа, иначе представление может быть обновлено несогласованным образом. В моем примере я использую $reactionAction['key'] предполагая, что это уникальное значение, в противном случае вы должны выбрать другое значение, например. идентификатор записи
@foreach($reactionActions as $reactionAction)
<div class = "relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in"
wire:key = "{{ $reactionAction['key'] }}"
>
<label>
{{ $reactionAction['label'] }}
<input type = "checkbox"
wire:model.live = "reactionActions.{{ $reactionAction['key'] }}"
name = "reaction_actions"
value = "{{ $reactionAction['key'] }}"
>
</label>
</div>
@endforeach
Вот еще я поправила этикетки
Обратите внимание, что значение Wire:model может быть установлено неправильно: посмотрите здесь, чтобы узнать подробности.
Тот факт, что при нажатии на чекбокс происходит вызов бэкенда, означает, что теперь событие перехватывается.
Как уже говорилось, способ ссылки на флажки установлен неправильно, что и является причиной ошибки. Если вы хотите сохранить структуру данных, вы можете рассмотреть возможность оценки каждого флажка как отдельного флажка, поэтому часть представления будет выглядеть так:
@foreach($reactionActions as $index => $reactionAction)
<div class = "some-classes" wire:key = "actions-{{$reactionAction['key']}}">
<label>
{{ $reactionAction['label']}}
<input type = "checkbox"
wire:model.live = "reactionActions.{{$index}}.checked" {{-- NOTE THIS --}}
>
</label>
</div>
@endforeach
Кроме того, вывод, который вы показываете, генерируется функцией print_r, которая выводит значения false и null в виде пустых строк (как это делает echo). Если вы хотите увидеть эти значения напечатанными, вы можете использовать var_export().
Я не знаю, откуда взялась ваша функция varDump(), в любом случае рабочий метод update() для регистрации изменений может быть:
public function updated($varName, $value)
{
Log::info("key: $varName");
Log::info("value: $value (" . var_export($value, true) . ')');
}
Тот факт, что при нажатии на флажок происходит вызов бэкэнда, означает, что событие перехватывается, как и запрошено в заголовке. В своем ответе я уже предположил, что способ ссылки на флажки установлен неправильно. Также обратите внимание, что тип bool не теряется, вывод, который вы показываете, генерируется print_r, который выводит ложные и нулевые значения в виде пустых строк (как это делает echo), если вы хотите увидеть эти значения напечатанными, вы можете использовать var_export() . Подробности смотрите в моем дополнении к моему ответу.
Пожалуйста, прочитайте ОБНОВЛЕННЫЙ КОД