Livewire two way data binding

To achieve two-way data binding in Livewire, you need to ensure that the property you are binding to the input field is properly updated within the Livewire component. From your description, it looks like you are trying to update the estado property based on some API response.

Here is a step-by-step solution to ensure that the value inside the Livewire component updates the input field in the Blade component:

1. Ensure the Livewire Component is Set Up Correctly:

   • Make sure you have the estado property defined in your Livewire component.
   • Use the @livewire directive to include the Livewire component in your Blade view.

2. Update the Livewire Component:

   • Define the estado property.
   • Use the @On directive to listen for the set-user-coordinates event.
   • Update the estado property within the setUserCoordinates method.

3. Bind the Input Field to the Livewire Property:

   • Use the wire:model.live directive to bind the input field to the estado property.

Here is an example of how you can achieve this:

Livewire Component (e.g., UserCoordinatesComponent.php)

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class UserCoordinatesComponent extends Component
{
    public $estado;
    public $cidade;

    protected $listeners = ['setUserCoordinates'];

    public function setUserCoordinates($latitude, $longitude)
    {
        $apiKey = env("GOOGLE_MAPS_API_KEY");
        $latlng = "$latitude,$longitude";

        $response = Http::get("https://maps.googleapis.com/maps/api/geocode/json", [
            "latlng" => $latlng,
            "key" => $apiKey
        ]);

        if ($response->successful()) {
            $results = $response->json()["results"][0];
            $this->estado = $results["address_components"][4]["short_name"];
            $this->cidade = $results["address_components"][3]["long_name"];
        }
    }

    public function render()
    {
        return view('livewire.user-coordinates-component');
    }
}

Blade View (e.g., user-coordinates-component.blade.php)

<div>
    <input type="text" wire:model.live="estado" placeholder="Estado">
</div>

Including the Livewire Component in Another Blade View

@livewire('user-coordinates-component')

Triggering the Event

To trigger the setUserCoordinates event, you can use JavaScript or another Livewire component. Here is an example using JavaScript:

document.addEventListener('DOMContentLoaded', function () {
    Livewire.emit('setUserCoordinates', latitude, longitude);
});

Summary

• Ensure the estado property is defined in the Livewire component.
• Use the wire:model.live directive to bind the input field to the estado property.
• Update the estado property within the setUserCoordinates method.
• Trigger the setUserCoordinates event to update the estado property.

This setup should ensure that the value inside the Livewire component updates the input field in the Blade component.