Laravel livewire - как передать географические координаты пользователя компоненту livewire

Question

Я пытаюсь отправить географические координаты (широту и долготу) пользователя компоненту livewire для загрузки близлежащих мест. Однако я не могу отправить его, потому что это переменные javascript. Вопрос в том, как отправить переменную javascript в компонент livewire?

Вот что я сделал до сих пор.

# home.blade.php

@extends('layouts.app')

@section('content')
    <script>
        var latitude;
        var longitude;
        navigator.geolocation.getCurrentPosition(
            function success(pos) {
                var loc = pos.coords;
                latitude = loc.latitude;
                longitude = loc.longitude;
            }, 
            function error(err) {
                // console.warn(`ERROR(${err.code}): ${err.message}`);
                $.getJSON('https://ipinfo.io/geo', function(response) { 
                    var loc = response.loc.split(',');
                    latitude = parseFloat(loc[0]);
                    longitude = parseFloat(loc[1]);
                });
            }, options
        );
    </script>
    @livewire('nearby')
@endsection
@livewireScripts

# Nearby.php 

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Listing;

class Nearby extends Component
{
    use WithPagination;

    public function render()
    {
        $listings = Listing::paginate(9);
        return view('livewire.nearby', [
            'listings' => $listings
        ]);
    }
}

# nearby.blade.php - livewire blade

<div class="relative bg-gray-50 px-4 sm:px-6 lg:px-8">
    <div class="relative max-w-6xl mx-auto">
        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
            @foreach($listings as $listing)
                @include('components.listing',['listing'=>$listing])
            @endforeach
        </div>
        <div class="text-center mx-auto mt-3">
            {{ $listings->links() }}
        </div>
    </div>
</div>

Answer 1

Вам нужно будет создать глобальное событие из вашего скрипта. нравится:

 //emit this event inside your success function. pass latitude and longitude with the event 

  window.livewire.emit('set:latitude-longitude', latitude, longitude) 

После этого вы можете прослушивать это событие из класса компонента livewire следующим образом:

  protected $listeners = [
        'set:latitude-longitude' => 'setLatitudeLongitude'
    ];

Затем установите долгую переданную широту, используя функцию setLatitudeLongitude внутри класса компонента livewire.

public function setLatitudeLongitude($latitude, $longitude) 
{
   $this->latitude = $latitude;
   $this->longitude = $longitude;
}

Дайте мне знать, если вам нужны дополнительные объяснения:)