Почему при наличии нескольких динамических флажков событие не запускается?

В приложении 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'] }}">

Но я получил ту же ошибку.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В 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) . ')');
}

Пожалуйста, прочитайте ОБНОВЛЕННЫЙ КОД

mstdmstd 15.03.2024 08:29

Тот факт, что при нажатии на флажок происходит вызов бэкэнда, означает, что событие перехватывается, как и запрошено в заголовке. В своем ответе я уже предположил, что способ ссылки на флажки установлен неправильно. Также обратите внимание, что тип bool не теряется, вывод, который вы показываете, генерируется print_r, который выводит ложные и нулевые значения в виде пустых строк (как это делает echo), если вы хотите увидеть эти значения напечатанными, вы можете использовать var_export() . Подробности смотрите в моем дополнении к моему ответу.

TUPKAP 15.03.2024 20:06

Другие вопросы по теме