0

Estoy haciendo una web en Laravel con un listado de películas donde puedes seleccionar qué películas te gustan. Para ello, en cada película tendría un botón para "Añadir a favoritos" y en caso de que ya se tiene la película como favorita aparecería el botón "Ya no me gusta".

He aquí el array $FavoriteMovies donde contiene las películas favoritas:

array:7 [▼
  8392 => 8392
  414906 => 414906
  823625 => 823625
  505026 => 505026
  614917 => 614917
  629542 => 629542
  335787 => 335787
]

Aquí el fragmento del código donde aparecerían dichos botones:

@if($FavoriteMovies[$movie['id']] == $movie['id'])
    <form action="{{route('components.dislike', $movie['id'])}}" method="POST">
    @csrf
    @method('DELETE')
        <input type="hidden" id="id_user" name="id_user" value="{{$iduser = auth()->id()}}">
        <input type="hidden" id="id_movie" name="id" value="{{$idmovie = $movie['id']}}">
        <button type="submit">
            <span>Dislike</span>
        </button>
    </form>
    @else
    <form action="{{route('components.favorite', $movie['id'])}}" method="POST">
    @csrf
        <input type="hidden" id="id_user" name="id_user" value="{{$iduser = auth()->id()}}">
        <input type="hidden" id="id_movie" name="id" value="{{$idmovie = $movie['id']}}">
        <button type="submit">
            <span>Add favorite</span>
        </button>
    </form>
@endif

Añado $FavoriteMovies en el componente de la vista:

<x-movie-card :movie="$movie" :genres="$genres" :FavoriteMovies="$FavoriteMovies"/>

Hasta aquí, el código no hace ningún efecto. Por lo que añado $FavoriteMovies en este fragmento de código:

namespace App\View\Components;

use Illuminate\View\Component;

class MovieCard extends Component
{
    public $movie;
    public $genres;
    public $FavoriteMovies;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($movie, $genres, $FavoriteMovies)
    {
        $this->movie = $movie;
        $this->genres = $genres;
        $this->FavoriteMovies = $FavoriteMovies;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.movie-card');
    }
}

Pero me sale este mensaje de error:

Illuminate\Contracts\Container\BindingResolutionException
Unresolvable dependency resolving [Parameter #2 [ <required> $FavoriteMovies ]] in class App\View\Components\MovieCard (View: /Applications/MAMP/htdocs/filments/resources/views/index.blade.php)

Gracias de antemano.

1 respuesta 1

0

Versión corta:

Como dice en Blade Templates: Casing .

Component constructor arguments should be specified using camelCase, while kebab-case should be used when referencing the argument names in your HTML attributes.

O sea: atributos con guión, variables en camelCase

<x-movie-card :movie="$movie" :genres="$genres" :favorite-movies="$favoriteMovies"/>

Asegúrate de renombrar $favoriteMovies en el resto del código, y lo mismo con el atributo de instancia del componente.

class MovieCard extends Component
{
    public $movie;
    public $genres;
    public $favoriteMovies;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($movie, $genres, $favoriteMovies)
    {
        $this->movie = $movie;
        $this->genres = $genres;
        $this->favoriteMovies = $favoriteMovies;
    }

A lo mejor funcionaría igual si usaras $this->FavoriteMovies = $favoriteMovies pero mejor ahórrate el sufrimiento de debuggear esa mezcla.

Versión Larga

1. Las variables en PHP son case-sensitive. Pero la especificación HTML es case insensitive para tags y atributos. así que por naturaleza los siguientes son idénticos:

<x-movie-card :FavoriteMovies="$FavoriteMovies" />
<x-movie-card :fAvOrItesMovieS="$FavoriteMovies" />
<x-movie-card :FAVORITEMOVIES="$FavoriteMovies" />

Blade permite salirse un poco de esa rigidez pero no le conviene apartarse del estándar HTML cuando Blade no pretende reemplazarlo.

2. Similarmente a la manera como Element.dataset normaliza sus data attributes en HTML, Blade normaliza el nombre de éstos a camelCase, para generar un parameterBag. Un tag como este:

<x-movie-card :FavoriteMovies="$FavoriteMovies" :favorite-movies="$favoriteMovies"/>

Se almacena a un objeto similar a un array

 'favoriteMovies' => $FavoriteMovies
 'favoriteMovies' => $favoriteMovies

En donde se pisan los nombres que al normalizase se han vuelto repetidos.

3. La especificación W3C no establece un orden para los atributos, de manera que

<x-movie-card :movie="$movie" :genres="$genres" :favorite-movies="$favoriteMovies"/>

Debe generar el mismo resultado que

<x-movie-card :favorite-movies="$favoriteMovies" :movie="$movie" :genres="$genres" />

4. Para permitir pasarle atributos en cualquier orden al componente, Blade usa ReflectionClass para hacer introspección del constructor. Léase "agarra los nombres de los parámetros de __construct".

Estas variables cuyo nombre ahora conoce, las va poblando con el parameter bag. Y en eso se da cuenta que tiene un parameter favoriteMovies que no ha pedido, pero no tiene FavoriteMovies que le falta porque en la normalización el parameter bag lo ha eliminado.

1
  • Funcionó, muchas gracias!!
    – AngelFG
    Commented el 4 abr. 2022 a las 18:18

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.