Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

194
Vistas
Unable to pass more than one props in Vue3

I want to pass 2 props to my components. Both are String, but only the title props can be passed in. I checked the posterUrl by passing the url to title props and it works. But the title can not be received when i send it as poster. So i'm sure its not the data that has problem.

Then i tried to use default value, and the image shows up but they are all using the default value. I've tried using shorthand, v-bind, and standard use, nothing works.

The components looks like this

    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>
        `,
    })

I use it like this

        <item-movie v-for="movie in movies" :key="movie.id"
          :title="movie.title" :posterUrl="imageUrl+movie.poster_path">
        </item-movie>
over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

When using in-DOM templates (template as part of the HTML), pascal cased attribute/prop names (such as "posterUrl") needs to be converted to kebab-case - "poster-url"

Docs

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda