原创投稿
  1. 创想鸟首页
  2. 用户投稿

Vue.component生成的表格不显示数据，是什么原因？

程序猿 • • 用户投稿

Vue.component生成的表格不显示数据，是什么原因？

vue.component 生成的表格无法显示数据的排查与解决

本文分析了使用 Vue.component 创建表格时，数据无法正确显示的问题，并提供了详细的解决方案。

问题描述：

开发者使用 Vue.component 创建了一个表格组件，但数据未能正确渲染。代码示例如下：

Vue.component('each-list', {  props: ['obj'],  template: '{{obj.num}}{{obj.person}}{{obj.attribute}}' //缺少闭合标签和关键属性})var myTable = new Vue({  el: "#myTable",  data: {    rows: [      { num: 1, person: "张龙", attribute: "外包" },      { num: 2, person: "赵虎", attribute: "外包" },      { num: 3, person: "王朝", attribute: "外包" },      { num: 4, person: "马汉", attribute: "本部" }    ]  }});

问题原因分析：

立即学习“前端免费学习笔记（深入）”；

原始代码存在以下两个主要问题：

template 标签缺失闭合标签及关键属性: each-list 组件的 template 属性缺少 闭合标签，导致表格行结构不完整。此外，缺少 v-for 指令来循环渲染数据。

缺少唯一 key 属性: 在使用 v-for 循环渲染列表时，为每个列表项添加一个唯一的 key 属性至关重要。这有助于 Vue.js 跟踪列表项的变化，并高效地更新 DOM。

解决方案：

为了解决以上问题，需要对代码进行如下修改：

完善 each-list 组件的 template： 添加 闭合标签，确保表格行结构完整。

在父组件中使用 v-for 循环渲染 each-list 组件： 使用 v-for 指令遍历 rows 数据，并为每个

元素添加唯一的 key 属性。

修改后的代码如下：

Vue.component('each-list', {  props: ['obj'],  template: '{{obj.num}}{{obj.person}}{{obj.attribute}}'})var myTable = new Vue({  el: "#myTable",  data: {    rows: [      { num: 1, person: "张龙", attribute: "外包" },      { num: 2, person: "赵虎", attribute: "外包" },      { num: 3, person: "王朝", attribute: "外包" },      { num: 4, person: "马汉", attribute: "本部" }    ]  },  template: `
                          
` //在父组件中使用v-for循环渲染组件，并添加key属性});

通过以上修改，Vue.component 生成的表格就能正确显示数据了。 记住，key 属性对于 Vue.js 的高效渲染至关重要，尤其是在处理动态列表时。 选择一个唯一且稳定的属性作为 key，例如数据库主键或对象的唯一标识符。

以上就是Vue.component生成的表格不显示数据，是什么原因？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1560614.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
Vue3+TS生命周期函数报错：如何解决Argument of type ‘Function’ is not assignable to parameter of type ‘LifecycleHook[] | undefined’？
上一篇 2025年12月22日 05:45:16
H5页面如何正确显示iOS设备拍摄的HEIC图片？
下一篇 2025年12月22日 05:45:32

相关推荐

发表回复

登录后才能评论
关注微信