vue.js v-for 在两个表行上

Question

Vue 2，没有网络包。我想一次渲染两个 trs，用于主要和细节可扩展行。这就是我想要实现的目标：

 <table>
   <tbody>
     <div v-for="item in items">
         <tr></tr>
         <tr class="detail-row"></tr>
     </div>
   </tbody>
</table>

问题是 <div> 是 tbody 的无效子项。如何在每次 for 循环迭代时渲染两个 <tr> ？

原文由 user3599803 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是您在支持 template 的浏览器中解决它的方法。

 <table>
   <tbody>
     <template v-for="item in items">
         <tr></tr>
         <tr class="detail-row"></tr>
     </template>
   </tbody>
</table>

如果您需要支持 不 支持 template 的浏览器，我通常会求助于渲染功能。

这是两者的一个工作示例。

 console.clear()

new Vue({
  el: "#app",
  data: {
    items: [{
        master: "Master",
        detail: "Detail"
      },
      {
        master: "Master",
        detail: "Detail"
      },
    ]
  }
})

new Vue({
  el: "#app2",
  data: {
    items: [{
        master: "Master",
        detail: "Detail"
      },
      {
        master: "Master",
        detail: "Detail"
      },
    ]
  },
  render(h){
    // build the rows
    let rows = []
    for (let item of this.items){
      rows.push(h("tr", [h("td", [item.master])]))
      rows.push(h("tr", {class: "detail-row"}, [h("td", [item.detail])]))
    }

    // add rows to body
    let body = h("tbody", rows)

    // return the table
    return h("table", [body])
  }
})

 .detail-row{
 background-color: lightgray;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<h2>Using template</h2>
<div id="app">
  <table>
    <tbody>
      <template v-for="item in items">
        <tr><td>{{item.master}}</td></tr>
        <tr class="detail-row"><td>{{item.detail}}</td></tr>
      </template>
    </tbody>
  </table>
</div>

<h2>Using render function</h2>
<div id="app2"></div>

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在较新版本的 VueJS 中，它需要一个索引。所以解决方案看起来像

  <table>
    <tbody>
      <template v-for="(item, index) in items">
        <tr :key="index">
           <td>{{item.master}}</td>
        </tr>
        <tr :key="index" class="detail-row">
           <td>{{item.detail}}</td>
        </tr>
      </template>
    </tbody>
  </table>

原文由 James A Mohler 发布，翻译遵循 CC BY-SA 4.0 许可协议