Data binding 使用Vue使用包含数组的对象填充HTML表行

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

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

我尝试了以下操作，但结果不好-这是我的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知识的人能在这里帮助我。干杯。

原来原因是您正在使用DOM模板，浏览器将未知的

单元格

元素移动到

v-for

上方，并且Vue无法再访问行值：

没有

单元

组件的解决方案，只要有内联单元元素，就可以正常工作。此外，表模板中不需要

模板

包装器：

newvue({
el:“#应用程序”，
数据：{
车队：[
{团队：'1'，时间：['1'，'2'，'3']}，
{团队：'两'，时间：['4'，'5'，'6']}，
{团队：'三'，时间：['7'，'8'，'9']}
]
}
});

{{row.team}}
{{time}}
原来原因是您在DOM模板中使用，浏览器将未知的
单元格
元素移动到
v-for
上方，并且Vue无法再访问行值：

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


newvue({
el:“#应用程序”，
数据：{
车队：[
{团队：'1'，时间：['1'，'2'，'3']}，
{团队：'两'，时间：['4'，'5'，'6']}，
{团队：'三'，时间：['7'，'8'，'9']}
]
}
});

{{row.team}}
{{time}}
如果您不在此处使用
单元格
组件，它工作正常：看起来问题仅在您尝试循环组件时出现-它会抛出一个错误
渲染期间未定义行
。老实说，我从来没有遇到过这种情况，也许Vue团队的人可以澄清一下（@Linus Borg？）。另外，无论出于何种原因，您都有奇怪的
包装器，我认为不需要它。因为它是一个in-DOM模板，所以在Vue编译模板之前，表中模板标记之间的整个部分都会被大多数浏览器从表中拉出（因为它是无效的HTML）。然后，Vue将编译模板，并尝试在不再存在的行上迭代。@wostex工作起来很有魅力。由于该代码笔，我只使用了
单元格
和
。你的更简单，而且它确实有效。非常感谢！如果你把它作为答案贴出来，如果你愿意，我可以把它标记为已解决。@BertEvans，我不明白。这里有一个例子：有一个错误。没有
模板
标记或任何东西。在我自己的代码中，我使用嵌套的
v-for
，组件由于某种原因没有问题（尽管我看不出有什么区别）。这段代码中到底有什么内容被破坏了？@wostex检查一下这段更新的代码。我删除了Vue，以便您可以查看浏览器实际渲染的内容（您可以检查它）。请注意，
单元格
已移动。浏览器对某些类似HTML的表中允许的内容非常挑剔。这是
is
指令存在的原因之一。如果您不在此处使用
单元格
组件，它可以正常工作：看起来只有在尝试循环组件时才会出现问题-它抛出一个错误
行在渲染期间未定义
。老实说，我从来没有遇到过这种情况，也许Vue团队的人可以澄清一下（@Linus Borg？）。另外，无论出于何种原因，您都有奇怪的
包装器，我认为不需要它。因为它是一个in-DOM模板，所以在Vue编译模板之前，表中模板标记之间的整个部分都会被大多数浏览器从表中拉出（因为它是无效的HTML）。然后，Vue将编译模板，并尝试在不再存在的行上迭代。@wostex工作起来很有魅力。由于该代码笔，我只使用了
单元格
和
。你的更简单，而且它确实有效。非常感谢！如果你把它作为答案贴出来，如果你愿意，我可以把它标记为已解决。@BertEvans，我不明白。这里有一个例子：有一个错误。没有
模板
标记或任何东西。在我自己的代码中，我使用嵌套的
v-for
，组件由于某种原因没有问题（尽管我看不出有什么区别）。这段代码中到底有什么内容被破坏了？@wostex检查一下这段更新的代码。我删除了Vue，以便您可以查看浏览器实际渲染的内容（您可以检查它）。请注意，
单元格
已移动。浏览器对某些类似HTML的表中允许的内容非常挑剔。这是
is
指令存在的原因之一。我在上面评论了单元格组件损坏的原因。您也可以使用
。我在上面评论了单元格组件损坏的原因。您也可以使用
。
Vue.component('cell', {
    template: '#template-cell',
    name: 'row-value',
    props: ['value', 'vindex', 'rindex']
});