web-dev-qa-db-ja.com

2つのテーブル行に対するvue.js v-for

Vue 2、ウェブパックなし。メインと詳細の展開可能な行について、一度に2つのtrをレンダリングしたいと思います。これは私が達成しようとしていることです：

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

問題は、<div>がtbodyの無効な子であることです。 forループの反復ごとに2つの<tr>sをレンダリングする方法は？

vue.jshtml-tablerowsv-for
13
user3599803

これは、templateをサポートするブラウザーで解決する方法です。

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

notが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>
17
Bert