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: "本部" }
    ]
  }
});

问题原因分析：

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

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

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

   

   ChatGPT Website Builder

   ChatGPT网站生成器，AI对话快速生成网站

   下载

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

解决方案：

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

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

2. 在父组件中使用 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，例如数据库主键或对象的唯一标识符。