1

Estoy trabajando con un componente Livewire y en la página estoy mostrando un <select>, dentro existen 5 opciones, cada opción tiene un valor numérico asignado, (del 1 al 5) estoy buscando la manera de mostrar sólamente una opción por clic, actualmente al elegir una de las opciones la nueva opción que selecciono me aparece por debajo de la que ya se mostraba, no puedo hacer que se oculte la que ya aparecía.

Muestro un ejemplo por si la problemática no ha quedado bien explicada: https://drive.google.com/file/d/10GqJ9ZWnjbvLKn8VgovEsjs9kafDuTjC/view?usp=sharing

Se puede ver que al eligir una opción del select la lista "vieja" no desaparece, también se puede ver que la lista "nueva" aparece por debajo.

Cada "opción" es una colección de arrays que recupero de una API. A continuación muestro y explico qué es lo que está haciendo mi código.

  1. En mi componente tipo "clase" de Livewire tengo por el momento 2 propiedades públicas $episodes y $page cada una es utilizado por 2 métodos diferentes, aunque utilizo $page como el modelo en las opciones numéricas dentro del select, $episodes es usado dentro del método que se encargará de verificar cuando la página haya sido actualizada para que pueda correr el código donde se encuentra $page

  2. Para mostrar las colecciones utilizo el método mount y dentro le paso el método currentSeason() que es donde se genera la recuperación de los recursos que se encuentran en la API.

  3. Este método currentSeason() es en donde inserto la URL que recupera los recursos de la API, mediante una solicitud GET el punto de referencia en es guardado en una variable que se llama: $podcastSeason en la URL dentro de esta variable concateno la variable $page para que pueda mostrarme una página diferente según haya sido la opción que se seleccione desde el front-end. Por ejemplo si la dirección es videos/game/podcast/3/10 entonces veré la página 3 y obtendré 10 resultados.

  4. El método de updatedPage() básicamente correrá lo que hace currentSeason() y éste lo ´"único" que tiene es que va a "escuchar" cuando la página se haya recargado/actualizado. La finalidad de éste método es poder generar una nueva solicitud GET hacia la API para no mostrar todas las páginas del punto de referencia, que exclusivamente se ejecute al seleccionar una opción dentro del select.

Esta es el componente completo:

<?php

namespace App\Http\Livewire;

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

class ThpsPodcast extends Component
{   
    public $episodes = [];
    public $page = 5;

    public function mount()
    {
        $this->currentSeason();
    }

    public function currentSeason()
    {
        $podcastSeason = Http::get('http://thvid-api.herokuapp.com/videos/game/podcast/'. $this->page .'/10')->json();
        $this->episodes = collect($podcastSeason);
    }

    public function updatedPage()
    {
        $this->changeSeason();
    }
    
    public function render()
    {
        return view('livewire.thps-podcast');
    }
}

En la vista estoy utilizando un loop forelse al cuál la variable de $episodes es la responsable de "imprimir" los resultados en la página:

<div>
<div>
    <select wire:model="page">
        <option value="5">Season 1</option>
        <option value="4">Season 2</option>
        <option value="3">Season 3</option>
        <option value="2">Season 4</option>
        <option value="1">Season 5</option>
    </select>
</div>
<div>
    <x-season-card>        
        @forelse($episodes as $podcast)
            <div wire:key="page-{{ $page }}">
                <div>
                    <img src="{{ $podcast['Thumbnail'] }}">
                    <div>
                        <p>{{ $podcast['Title'] }}</p>
                        <x-play-now-button type="videos/keyword/{{$podcast['_id']}}"/>
                    </div>
                </div>
            </div>
        @empty
            @foreach(range(1, 10) as $loadingEpisodes)
                loading animation...
            @endforeach
        @endforelse
    </x-season-card>
</div>
</div>

Cuando el usuario haya seleccionado una opción de la lista, el método updatedPage() debería de ser ejecutado realizando una nueva solicitud GET hacia el punto de referencia, y consigo, traerme una nueva página con recursos diferentes.

Aunque la solicitud es correcta y los recursos recuperados desde la API el acomodo es erróneo ya que me sigen apareciendo los que ya estaban en vez de ocultarse.

Estoy trabajando en Laravel 8 y el componente es Livewire de la versión 2 en Firefox.

1 respuesta 1

1

Encontré la solución.

Problemática: Al seleccionar un artículo de la lista la reacción de Livewire no emitía la respuesta esperada, y esta era que se pudiera cargar una lista de arrays diferente cada vez que se eligiera una opción ya que para cada opción del select se tenía planeado que la nueva lista de episodios tomara el lugar de la página, haciendo que los episodios anteriormente vistos se pudieran ocultar.

Solución: El error estaba en que se tenía que instruir al componente que lo que se esperaba era un "id" nuevo (columna proveniente de la API), esto se pudo solucionar ya que ahora se incluye junto con la variable $podcast que es la misma que está iterando sobre el contenido. Esta variable se sobreescribió en el campo de wire:key, se encuentra después de el loop "forelse". No había necesidad de utilizar $page, en este caso el loop lo que hacía era que mostraba nuevamente el contenido y eso no era lo planeado ya que no se pretendía utilizar varios loops forelse.

<div>
<div>
    <select wire:model="page">
        <option value="5">Season 1</option>
        <option value="4">Season 2</option>
        <option value="3">Season 3</option>
        <option value="2">Season 4</option>
        <option value="1">Season 5</option>
    </select>
</div>
<div>
    <x-season-card>        
        @forelse($episodes as $podcast)
            <div wire:key="podcast-{{ $podcast['_id'] }}">
                <div>
                    <img src="{{ $podcast['Thumbnail'] }}">
                    <div>
                        <p>{{ $podcast['Title'] }}</p>
                        <x-play-now-button type="videos/keyword/{{$podcast['_id']}}"/>
                    </div>
                </div>
            </div>
        @empty
            @foreach(range(1, 10) as $loadingEpisodes)
                loading animation...
            @endforeach
        @endforelse
    </x-season-card>
</div>
</div>

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.