Quiero pasar 2 accesorios a mis componentes. Ambos son cadenas, pero solo se pueden pasar los accesorios del título. Verifiqué posterUrl pasando la URL a los accesorios del título y funciona. Pero el título no se puede recibir cuando lo envío como póster. Así que estoy seguro de que no son los datos los que tienen problemas.
Luego traté de usar el valor predeterminado y aparece la imagen, pero todos usan el valor predeterminado. He intentado usar taquigrafía, v-bind y uso estándar, nada funciona.
Los componentes se ven así
app.component('item-movie', { props: { title: String, posterUrl: { type: String, default: "https://image.tmdb.org/t/p/original/5NYdSAnDVIXePrSG2dznHdiibMk.jpg", }, }, template: /*html*/ ` <div class="col-md" style="margin-bottom: 2rem; margin-top: 2rem;"> <img class="img-fluid" style="min-width: 300px;" v-bind:src="posterUrl"> <p style="margin-top: 1rem; margin-bottom: -0.3rem; color: white;">{{ title }}</p> </div> `, })lo uso asi
<item-movie v-for="movie in movies" :key="movie.id" :title="movie.title" :posterUrl="imageUrl+movie.poster_path"> </item-movie>Cuando se usan plantillas en DOM (plantilla como parte del HTML), los nombres de atributo/propiedad en mayúsculas y minúsculas (como "posterUrl") deben convertirse a kebab-case - "poster-url"
Los nombres de los atributos HTML no distinguen entre mayúsculas y minúsculas, por lo que los navegadores interpretarán cualquier carácter en mayúsculas como minúsculas. Eso significa que cuando usa plantillas en DOM, los nombres de prop en camelCased deben usar sus equivalentes en kebab (delimitados por guiones).