0

Tengo un componente Livewire en donde hago una solicitud a una API con el verbo GET, lo que busco resolver es pasar el resultado que obtengo de una variable hacia otra. Estoy utilizando la variable de $response para guardar la respuesta, esta es la que hace la solicitud a esta API, y como podrán ver tengo una propiedad pública la cuál le asigno un array vacío, es en esta última a la que busco pasarle la respuesta de la API y utilizarla en mi vista dentro de un foreach.

<?php

namespace App\Http\Livewire;

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

class SearchDropDown extends Component
{
    public $search;
    public $searchResults = [];
    
    public function updatedSearch($newValue)
    {
        $response = Http::get('http://thvid-api.herokuapp.com/videos/game/'.$this->search)->json();
        
        $this->searchResults = $response;
    }

    public function render()
    {
        return view('livewire.search-drop-down');
    }
}

En la vista Blade y mediante un campo de texto el usuario podrá escribir algo y simultáneamente la solicitud al servidor con el método GET se disparará y así el usuario podrá obtener los resultados en tiempo real.

Si escribo dd($response) en la función y me voy a la vista y empiezo a escribir en el campo de búsqueda obtengo los datos correspondientes pero a manera de array.

No he podido mostrar los resultados dentro de la vista utilizando el foreach.

Componente de vista: livewire.search-drop-down

<input
    wire:model.debounce.300ms="search"
    id="search"
    type="search"
    autocomplete="off"
    placeholder="Type game title or THPS player"
    class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
>

Vista donde implemento el foreach

                <ul class="h-auto rounded-md p-2 mt-4 mb-4">
                    @foreach($searchResults as $result)
                        <li class="w-full h-20 flex items-center px-2 space-x-4 mb-4 
                                    border-b-2 rounded-sm border-gray-500 border-opacity-40
                                    hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70 
                                    transition ease-in-out"
                        >
                            <img 
                                class="p-2"
                                src="{{ $result['Thumbnail'] }}"
                                alt="search results"
                            >
                            <p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
                            <p class="text-sm">{{ $result['Game'] }}</p>
                            <p class="text-sm">{{ $result['newduration'] }}</p>
                        </li>
                    @endforeach
                </ul>

1 respuesta 1

1

Lo resolví, el problema era que tanto el campo de búsqueda, y el HTML donde se visualizarían los resultados no estaban en el mismo componente.

Entonces desde el componente Blade incluyo el componente Livewire:

            <div class="bg-gray-800">
                <div class="p-2">

                    <div class="flex justify-between p-4">
                        <h3 class="font-semibold text-lg italic tracking-wide text-white">Search</h3>
                        <a 
                            href="#" 
                            class="p-2 transition-all duration-200 hover:bg-gray-700 rounded-md bg-gray-600"
                        >
                            <svg
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" 
                                height="24" 
                                viewBox="0 0 24 24" 
                                width="24"
                            >
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path>
                            </svg>
                        </a> <!-- close button -->
                    </div>
                
                    @livewire('search-drop-down')
                    
                </div>
            </div>

Y en el componente Livewire ya puedo hacer mi búsqueda porque ambas cosas estan "conectadas" al mismo componente tipo clase:

<div>
    <input
        wire:model.debounce.300ms="search"
        id="search"
        type="search"
        autocomplete="off"
        placeholder="Type game title or THPS player"
        class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
    >
    <svg
        class="absolute ml-1 top-24 text-white"
        xmlns="http://www.w3.org/2000/svg" 
        height="24" 
        viewBox="0 0 24 24" 
        width="24"
    >
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    </svg>
    <main class="flex items-center flex-col text-white relative ">
        <ul class="h-auto rounded-md p-2 mt-4 mb-4">
            @foreach($searchResults as $result)
                <li class="w-full h-20 flex items-center px-2 space-x-4 mb-4 
                            border-b-2 rounded-sm border-gray-500 border-opacity-40
                            hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70 
                            transition ease-in-out"
                >
                    <img 
                        class="p-2 w-8"
                        src="{{ $result['Thumbnail'] }}"
                        alt="search results"
                    >
                    <p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
                    <p class="text-sm">{{ $result['Game'] }}</p>
                    <p class="text-sm">{{ $result['newduration'] }}</p>
                </li>
            @endforeach
        </ul> <!-- results -->
    </main>
</div>

Ambos estan en el mismo lugar, entonces la variable ahora sí corresponde con el wire:model

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.