CODEWITHSUNDEEP
vue.jsvuejs2axioscomponentsvue-component
Felizx Fell
Felizx Fell

Reputation: 70

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

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?

Upvotes: 0

Views: 163

Answers (1)

steven
steven

Reputation: 322

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>

Upvotes: 1

Related Questions