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

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

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

问题描述：

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

<code class="javascript">Vue.component('each-list', {
  props: ['obj'],
  template: '<tr><td>{{obj.num}}<td>{{obj.person}}<td>{{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: "本部" }
    ]
  }
});</code>

问题原因分析：

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

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

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

   

   YOO必优科技-AI写作

   智能图文创作平台，让内容创作更简单

   下载

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

解决方案：

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

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

2. 在父组件中使用 v-for 循环渲染 each-list 组件： 使用 v-for 指令遍历 rows 数据，并为每个 <tr> 元素添加唯一的 <code>key 属性。

   修改后的代码如下：

   <code class="javascript">Vue.component('each-list', {
     props: ['obj'],
     template: '<tr><td>{{obj.num}}</td><td>{{obj.person}}</td><td>{{obj.attribute}}</td></tr>'
   })
   
   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: `<table>
                 <each-list v-for="row in rows" :key="row.num" :obj="row"></each-list>
               </table>` //在父组件中使用v-for循环渲染组件，并添加key属性
   });</code>

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