首页 > 解决方案 > Laravel Livewire:开放模式

问题描述

我有一张带有标记的地图。如果您单击此标记,它将运行它后面的 php。模态和标记是同一个组件。如何单击打开此组件?我已经尝试过 x-on 和 dispatchBrowserEvent。

我有一个适用于按钮的方法,但不适用于这个(wire:click =“”)。

零件:

<script>


    var hqicon = L.icon({
        iconUrl: '{{ asset('assets/map-icons/hq-icon.png') }}',
        iconSize: [30, 30]
    });

    var maker = L.marker([{{ Auth::user()->company->hq->lat() }}, {{ Auth::user()->company->hq->lon() }}],{icon: hqicon}).addTo(map)
    .on('click', function (e) {
        window.livewire.emit('launchHqModal')
    });
</script>

<x-jet-dialog-modal wire:model="HqModal" id="HqModal">
    <x-slot name="title">
        {{ __('Hoofdkantoor') }}
    </x-slot>

    <x-slot name="content">

    </x-slot>

    <x-slot name="footer">

    </x-slot>
</x-jet-dialog-modal>

组件 php:

<?php

namespace App\Http\Livewire\Map;

use Livewire\Component;

class HqMarker extends Component
{
    public $launchHqModal = false;

    protected $listeners = ['launchHqModal'];

    public function launchHqModal()
    {
        $this->dispatchBrowserEvent('launch-hq-modal');
        
        $this->emit('launch-hq-modal');

        $this->launchHqModal = true;

    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('map.hq-marker');
    }
}

提前致谢

标签: laravel-livewire

解决方案


推荐阅读