Vue - 使用 v-for 两次来呈现表格的行和单元格? [英] Vue - Using v-for twice to render a tables rows and cells?

问题描述

我想使用 Vue 来渲染一个包含行的表格，但将单元格作为一个组件.

我已经制作了一个工作示例我希望看到的最终结果并有一些关于我认为我可以如何去做的代码:

HTML

<表格><头><tr><th>Row</th><th>ID</th><th>姓名</th><th>年龄</th></tr></thead><tr v-for="(row, rindex) in people"><td>{{ rindex }}</td><cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell></tr></tbody><template id="模板单元格"><td>{{值}}</td></模板>

JS

//注册组件Vue.component('单元格', {模板:'#模板单元'，名称:'行值'，道具:['价值'，'vindex'，'rindex']//在这里我想访问 value、vindex 和 rindex});//启动应用新的 Vue({el: '#app',数据: {人们: [{id: 3, name: 'Bob', age: 27},{id:4，姓名:'弗兰克'，年龄:32}，{id:5，姓名:'乔'，年龄:38}]}});

这是因为，在 Vue 关于 v-for 的文档 他们展示了这个例子:

另一个用于索引:<div v-for="(value, key, index) in object">{{ 指数 }}.{{ 核心价值 }}

从逻辑上来说，我应该能够在没有太多问题的情况下获得单元格组件中的行索引，但是 事实并非如此，因为它会出现一堆错误，表明这些值未定义.

如果有人能在这里指出我正确的方向，那么我将不胜感激，因为我对这个问题没有想法，但真的很想了解如何正确实施.

(注意:我想在组件中渲染单元格的原因是为了注册值的变化，看答案 到我在这里问的另一个问题，如果你有兴趣的话)

解决方案

您只需要将 cell 组件包含在 template 元素中，这是因为 HTML 中的 table期望 仅在 tr 内 td，当它看到 cell 时，它不会渲染它(参见与Angular 此处).但是模板可以在这里用作内容片段，并且在 vue 编译后，它将添加 tr 代替 HTML 中的单元格.

 <td>{{ rindex }}</td><模板><cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex" ></cell></模板></tr>

查看工作笔这里.

I would like to use Vue to render a table with rows but have the cells as a component.

I have made a working example of what I would like to see as the end result and have some code relating to how I think that I could go about this:

HTML

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rindex) in people">
        <td>{{ rindex }}</td>
        <cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
      </tr>
    </tbody>
  </table>
  <template id="template-cell">
    <td>{{ value }}</td>
  </template>
</div>

JS

// Register component
Vue.component('cell', {
  template: '#template-cell',
  name: 'row-value',
  props: ['value', 'vindex', 'rindex']
  // In here I would like to access value, vindex and rindex
});
// Start application
new Vue({
  el: '#app',
  data: {
    people: [
      {id: 3, name: 'Bob', age: 27},
      {id: 4, name: 'Frank', age: 32},
      {id: 5, name: 'Joe', age: 38}
    ]
  }
});

This is because, in the Vue documentation on v-for they show the example:

And another for the index:

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

So logically thinking, I should be able to get the rows index in the cell component without too much issue but this is not so as it comes up with a bunch of errors indicating that the values are undefined.

If anyone could point me in the right direction here then I would be greatly appreciate it as I'm out of ideas with this problem but would really like to understand how to implement this correctly.

(Note: the reason for me wanting to render the cells in the component is to register the change of values, see the answer to another question that I asked here if you're interested)

解决方案

You just need to enclose your cell component inside an template element, this is because table in HTML expects only td inside tr, when it sees cell, it will not render it(see similar problem with Angular here). However template can be used here as a content fragment and after vue compiles, it will add tr in place of cell in the HTML.

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

see working pen here.

这篇关于Vue - 使用 v-for 两次来呈现表格的行和单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！