Получение моего модального окна с правильным продуктом с помощью livewire

Я учусь использовать livewire с laravel. Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку «Удалить», мое всплывающее модальное окно не получает продукт, который я выбрал, вместо этого я получаю последний продукт в своей таблице.

Вот мой Products.php

<?php

namespace Modules\Products\Http\Livewire;

use Modules\Products\Models\Product;
use Livewire\Component;

class Products extends Component
{
    public $modal = false;

    protected $listeners = [
        'productDeleted' => 'deleteModal',
        'close' => 'close',
        'confirmDelete' => 'delete'
    ];

    public function render()
    {
        return view('products::livewire.products', [
            'products' => Product::all()
        ]);
    }

    public function deleteModal($id)
    {
        $this->modal = true;
    }

    public function close()
    {
        $this->modal = false;
    }
}

Это мои продукты.blade.php

@foreach($products as $product)
    <button wire:click="$emit('productDeleted', {{ $product->id }})" class="bg-red-400 hover:bg-red-300 text-red-800 font-bold py-2 px-4 rounded inline-flex items-center">Delete</button>
    @if($modal)
        @include('products::livewire.deleteProductModal', ['product' => $product])
    @endif
@endforeach

Мой файл deleteProductModal.blade.php

{{ $product->title}}

laravel laravel-8
person Nienna    schedule 20.10.2020    source источник
comment
deleteModal($id) здесь $id ты не понял ?   -  person Kamlesh Paul    schedule 20.10.2020
comment
@KamleshPaul - даже если я найду продукт, я не знаю, как передать его в модальное окно, чтобы я мог удалить правильный продукт   -  person Nienna    schedule 20.10.2020
comment
почему вам нужно передать модель, когда у вас есть компонент и событие   -  person Kamlesh Paul    schedule 20.10.2020
comment
Я использую модальное окно, чтобы подтвердить, что пользователь хочет удалить продукт, но проблема, с которой я столкнулся, заключается в том, что он не получает правильный продукт для удаления.   -  person Nienna    schedule 20.10.2020
comment
создать новое свойство public $isConfrm = false; и на основе модели показа в onClick   -  person Kamlesh Paul    schedule 20.10.2020
comment
Разве не этим я занимаюсь с public $modal = false;   -  person Nienna    schedule 20.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

для меня я использовал событие, и оно отлично работает.

//component
protected $listeners = ['ProductId'];
    public $productId;

    public function ProductId($id)
    {
        $this->productId= $id;
        $this->dispatchBrowserEvent('ProductId');
    }

//blade

<button type="button" wire:click="$emit('ProductId',{{ $product->id}})" >show modal </button>

// you can put $key where you want
<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ $key }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

<script>
window.addEventListener('ProductId', event => {
    $("#exampleModal").modal('show');
  })
</script>

я надеюсь, что это будет полезно для вашей работы :)

person karim benamar    schedule 13.12.2020