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

【问题标题】：vue js failed to pass an array of objects to a componentvue js 无法将对象数组传递给组件
【发布时间】：2020-11-28 23:21:50
【问题描述】：

我正在接收一个 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>

知道这个问题的人能告诉我问题是什么吗？

【问题讨论】：

您可以记录res.data 的值吗？你有什么收获吗？
是的，在 res.data 中带有我的数据列表的 json
从错误来看，它似乎是在数组中返回一个数组或其他东西。你能展示一下列表的结构吗？您可以用假数据替换真实数据，以保护隐私。另外，我很好奇为什么 listausuarios 属性显示在 DOM 中，而不是 listaUsuarios 作为道具。那里可能有拼写错误吗？
好吧，我意识到如果我有拼写错误，我不能把道具写成listaUsuarios，如果不是listausuarios

标签： vue.js vuejs2 axios components vue-component

【解决方案1】：

你在 html 模板中的 prop 名称需要是 kebab-case (https://vuejs.org/v2/guide/components-props.html)

像这样：

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

【讨论】：