使用 Vue 使用包含数组的对象填充 HTML 表格行答案

【问题标题】：Populating HTML table rows with objects containing an array using Vue使用 Vue 使用包含数组的对象填充 HTML 表格行
【发布时间】：2017-07-05 10:52:33
【问题描述】：

我正在尝试使用 Vue 框架填充 HTML 表格中的行 - 数据如下所示：

TeamRows: [
            { team: 'One', times: ['1', '2', '3'] },
            { team: 'Two', times: ['4', '5', '6'] },
            { team: 'Three', times: ['7', '8', '9'] }
          ]

我已尝试关注此codepen，但结果不佳 - 这是我的 HTML：

<tbody>
   <tr v-for="(row, rindex) in teamRows">
      <td>{{rindex}}</td>
         <template>
            <cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
         </template>
   </tr>
</tbody>
</table>
<template id="template-cell">
   <td>{{ value }}</td>
</template>

这是 Vue 组件：

Vue.component('cell', {
    template: '#template-cell',
    name: 'row-value',
    props: ['value', 'vindex', 'rindex']
});

我希望team 位于一行的第一列，times 位于与times 一样多的列中。希望有更多Vue知识的人能够在这里帮助我。干杯。

【问题讨论】：

如果您在这里不使用 cell 组件，它可以正常工作：jsfiddle.net/wostex/63t082p2/81 看起来问题仅在您尝试循环组件时出现 - 它会引发错误 row is not defined during render。老实说，我从未遇到过这种情况，也许 Vue 团队的某个人可以澄清这一点（@Linus Borg ？）。此外，无论出于何种原因，您都有奇怪的 <template> 包装器，我认为不需要它。
因为它是一个 in DOM 模板，在 Vue 编译模板之前，大多数浏览器都会将表格中模板标签之间的整个部分从表格中拉出（因为它是无效的 HTML）。然后，Vue 将编译模板并尝试遍历不再存在的行。
@wostex 这就像一个魅力。由于那个codepen，我只使用了cell 和<template>。你的更简单，它确实有效。非常感谢！如果您将其发布为答案，如果您愿意，我可以将其标记为已解决。
@BertEvans 我不明白。这是一个例子：jsfiddle.net/wostex/63t082p2/82 有一个错误。没有template 标签之类的。在我自己的代码中，由于某种原因，我使用嵌套的v-for 组件没有问题（尽管我看不出有什么区别）。这段代码实际上有什么问题？
@wostex 查看更新后的fiddle。我删除了 Vue，以便您可以看到浏览器实际呈现的内容（您可以检查它）。注意cell 已移动。浏览器对它们在某些 HTML（如表格）中允许的内容非常挑剔。这是is 指令存在的原因之一。

标签： data-binding html-table vue.js

【解决方案1】：

原来原因是您使用的是 DOM 内模板，而浏览器将未知的 cell 元素移动到 v-for 上方，而 Vue 无法再访问行值：https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

没有cell 组件的解决方案，只有内联单元格元素，工作正常。此外，表格模板中不需要template 包装器：

new Vue({
  el: '#app',
  data: {
    teamRows: [
      { team: 'One', times: ['1', '2', '3'] },
      { team: 'Two', times: ['4', '5', '6'] },
      { team: 'Three', times: ['7', '8', '9'] }
    ]
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tbody>
     <tr v-for="row in teamRows" :key="row.team">
       <td>{{ row.team }}</td>
       <td v-for="time in row.times">{{ time }}</td>
     </tr>
    </tbody>
  </table>
</div>

另外，作为讨论的结果，如果你将表格包装到另一个组件中，你仍然可以使用一个组件，这样浏览器就不会干扰，Vue 有机会正确渲染所有内容：

new Vue({
  el: '#app',
  data: {
    teamRows: [
      { team: 'One', times: ['1', '2', '3'] },
      { team: 'Two', times: ['4', '5', '6'] },
      { team: 'Three', times: ['7', '8', '9'] }
    ]
  }, 
  components: {
    'mytable': {
      template: `<table>
    <tbody>
     <tr v-for="row in rows" :key="row.team">
       <td>{{ row.team }}</td>
       <cell v-for="time in row.times" :value="time" :key="time"></cell>
     </tr>
    </tbody>
  </table>`,
      props: ['rows'],
      components: {
      	'cell': {
          template: `<td>{{ value }}</td>`,
      	  props: ['value'],
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <mytable :rows="teamRows"></mytable>
</div>

【讨论】：

我在上面评论了为什么单元格组件会损坏。你也可以使用<td is="cell" ...></td>。