Vue.js向组件传递对象数组失败，请求技术排查

首先看你的代码，核心问题大概率是组件注册顺序错误——你先创建了Vue实例，之后才注册全局组件tabla-usuario。

为什么会出现这个问题？ #

当Vue实例初始化时，tabla-usuario组件还未被注册，Vue会把这个标签当作普通的HTML元素处理。此时你写的:listaUsuarios="tablaUsuarios"会被当成普通属性绑定，把数组转换成字符串（也就是你看到的listausuarios="[object Object],..."），而不是作为Vue组件的prop传递。

之后虽然你注册了组件，Vue可能会尝试渲染组件结构，但prop的响应式绑定已经失效，组件内部的listaUsuarios还是初始的空数组，所以v-for循环根本不会执行，tbody自然是空的。

解决步骤： #

1. 调整组件注册顺序：把全局组件的定义放在Vue实例创建之前，确保实例初始化时能识别这个组件：

// 先注册组件
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" :key="usuario.correo"> <!-- 加上key优化 -->
 <td> {{ usuario.nombre }}</td>
 <td> {{ usuario.correo }}</td>
 <td> {{ usuario.password }}</td>
 </tr>
 </tbody>
 </table>
 </div>`
})

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

2. 添加prop类型验证（可选但推荐）：给组件的prop加上类型验证，能帮你快速排查数据类型错误，比如后端返回数据格式不符合预期的情况：

props: {
  listaUsuarios: {
    type: Array,
    required: true,
    default: () => [] // 空数组默认值
  }
}

3. 确认后端返回数据格式：确保res.data确实是一个对象数组，而不是嵌套在其他属性里（比如res.data.data）。可以在then回调里加console.log(res.data)确认数据结构。

另外，给v-for循环加上:key属性（比如用用户的邮箱作为唯一标识），这是Vue的最佳实践，能避免列表更新时的渲染问题。

内容的提问来源于stack exchange，提问作者Felizx Fell