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

Posted 2023-02-23

【中文标题】vue js 无法将对象数组传递给组件

【英文标题】：vue js failed to pass an array of objects to a component

【发布时间】：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

【参考方案1】：

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

像这样：

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