Блог

Я пытаюсь создать веб-приложение с небольшим ощущением мобильного приложения (я все еще ленив, изучая кроссплатформенные фреймворки :)). Итак, у меня есть страница, на которой отображаются все сообщения о событиях, и я могу просмотреть каждое отдельное сообщение, нажав на ссылку a href (мой маршрут работает отлично). Но чего я на самом деле хочу добиться, так это отображать каждое событие post В BOOTSTRAP MODAL. Так что, если я использую button и добавляю wire: click к кнопке (* button type=»button» wire: click.prevent=»show({{ $event-> id }})»>), он должен вывести модальный и переданные в него данные. Но, к сожалению, это не работает:(. Модальный будет отображаться, но данные НЕ передаются:'(

Мои коды ниже:

appHttpLivewireEvents.php

 <?php

namespace AppHttpLivewire;

use LivewireComponent;
use AppModelsEvent;

class Events extends Component
{
    public $events;
    public $event;
    public $event_id;
    public $event_title;
    public $event_author;
    public $event_date;
    public $event_time;
    public $event_image;
    public $event_location;
    public $event_map;
    public $event_details;

    public function show($id)
    {
        $this->event  = Event::where('id', $id)->first();

        $this->event_id         = $id;
        $this->event_title      = $event->event_title;
        $this->event_author     = $event->event_author;
        $this->event_date       = $event->event_date;
        $this->event_time       = $event->event_time;
        $this->event_image      = $event->event_image;
        $this->event_location   = $event->event_location;
        $this->event_map        = $event->event_map;
        $this->event_details    = $event->event_details;
    }

    public function render()
    {
        $this->events   = Event::orderBy('id', 'desc')->get();
        return view('livewire.events');
    }
}
 

resourcesviewslivewireevents.blade.php

 @section('title', 'Events')
@include('livewire.view-event')

<div class="block pt-1 pb-6">
    <div class="row m-0">
        @if (count($events) > 0)
            @foreach ($events as $event)
                <div class="col-12 mb-2">
                    <a type="button" data-toggle="modal" data-target="#showEventModal" wire:click="show({{ $event->id }})">
                        <div class="card bg-white shadow p-0">
                            <div class="card-header">
                                <div class="block mb-05">
                                    <img class="inline rounded mr-05" src="/assets/uploads/images/{{ $event->event_image }}" width="40" height="40">

                                    <span class="elegant font-md">{{ $event->event_title }}</span>
                                </div>

                                <div class="block elegant font-sm">
                                    <span class="block"><i class="fas fa-bullhorn mr-05"></i> {{ $event->event_author }}</span>

                                    <span><i class="fas fa-calendar-alt"></i> {{ $event->event_date }} <span class="mx-05">|</span> <i class="fas fa-clock"></i> {{ $event->event_time }}</span>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                @if (!empty($event->event_image))
                                    <img class="post-img" src="/assets/uploads/images/{{ $event->event_image }}">
                                @else
                                    <img class="post-img" src="/assets/img/no-image.jpg">
                                @endif
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        @else
            <div class="col-12 text-center">No record found!</div>
        @endif
    </div>
</div>
 

resourcesviewslivewireview-event.blade.php

 <div wire:ignore.self id="showEventModal" class="modal fade come-from-modal right" tabindex="-1" role="dialog" aria-labelledby="showEventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header white bg-red-dark borderless shadow-sm">
                <a type="button" class="back mr-4 white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-chevron-left"></i></span></a>

                <div class="page-title">{{ $event_title }}</div>
            </div>

            <div class="modal-body">
                <input type="text" name="id" wire:model="event_id">

                <h1>This is {{ $event_id }}</h1>
            </div>
        </div>
    </div>
</div>
 

routesweb.php

 <?php

use IlluminateSupportFacadesRoute;
use AppHttpControllersMainController;

use AppHttpLivewireMain;
use AppHttpLivewireDashboard;
use AppHttpLivewireEvents;

Auth::routes();

Route::group(['middleware' => 'auth'], function() {
    Route::get('/', [MainController::class, 'homepage'])->name('homepage');
    Route::get('/dashboard', Dashboard::class)->name('dashboard');
    Route::get('/events', Events::class)->name('events');
});
 

Что именно я делаю не так? Я даже изменил эффект плавного перехода bootstrap modal, чтобы он открывался справа, как мобильное приложение.

Измените метод show на этот и проверьте

 public function show($id)
{
    $this->event  = Event::where('id', $id)->first();

    $this->event_id         = $id;
    $this->event_title      = $this->event->event_title;
    $this->event_author     = $this->event->event_author;
    $this->event_date       = $this->event->event_date;
    $this->event_time       = $this->event->event_time;
    $this->event_image      = $this->event->event_image;
    $this->event_location   = $this->event->event_location;
    $this->event_map        = $this->event->event_map;
    $this->event_details    = $this->event->event_details;
}