vue js failed to pass an array of objects to a component

Question

I am receiving a json listing, and I am sending this to a component

const app = new Vue({
el: '#app',
data: {
    tablaUsuarios: []
},
mounted() {
    axios.get(url + 'listar/')
        .then(res => {
            this.tablaUsuarios = res.data
        })
        .catch(err => {
            console.error(err);
        })
}
})

Vue.component('tabla-usuario', {
props: ['listaUsuarios'],
template:`<div class="table-responsive">
        <table class="table table-hover text-center">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="usuario in listaUsuarios">
                    <td> {{ usuario.nombre }}</td>
                    <td> {{ usuario.correo }}</td>
                    <td> {{ usuario.password }}</td>
                </tr>
            </tbody>
        </table>
    </div>` 
  })

In the html

<tabla-usuario :listaUsuarios="tablaUsuarios"></tabla-usuario>

Technically this is how it should work the problem is that in the DOM it shows me like this

<div class="table-responsive" listausuarios="[object Object],[object Object],[object Object],[object Object],[object Object]">
        <table class="table table-hover text-center">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

Could someone who knows the subject tell me what the problem is?

Could you log the value of res.data? Are you getting anything? — Tony
– Tony, Commented Aug 9, 2020 at 5:10
From the error, it seems like it's returning an array within an array or something. Could you show the structure of the list? You could replace real data with fake data, to protect privacy. Also, I am curious at to why listausuarios attribute is showing in the DOM and not listaUsuarios as the props are. Could there be a spelling error there? — Tony
– Tony, Commented Aug 9, 2020 at 12:05
ok I realized that if I had a spelling mistake I can't put the prop as listaUsuarios if not like listausuarios — Felizx Fell
– Felizx Fell, Commented Aug 9, 2020 at 20:51

tony19 · Accepted Answer · 2022-07-15 00:43:29Z

1

Your prop name in the html template needs to be kebab-case (https://v2.vuejs.org/v2/guide/components-props.html)

like so:

<tabla-usuario :lista-usuarios="tablaUsuarios"></tabla-usuario>

edited Jul 15, 2022 at 0:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 9, 2020 at 2:44

steven

3222 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue js failed to pass an array of objects to a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related