Question

我收到一个json清单，并将其发送到组件

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

在html

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

从技术上讲这是应该如何工作的，问题是在DOM中这样显示我

<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>

知道这个问题的人能告诉我问题出在哪里吗？

Answer 1

您在html模板中的prop名称必须为kebab-case（https://vuejs.org/v2/guide/components-props.html）

像这样：

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

vue js无法将对象数组传递给组件

1 个答案: