[Vuejs]-VueJS add <tr> after every 25 <tr>'s – IE DOM not recognizing <template>

by

0👍

One alternative solution, uses computed property to re-shape the dataset then get the desired result like below demo:

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    dataset: Array.from({length: 10}, (v, i) => Array.from({length: 3}, (subV, subI) => {
      return i
    }) ),
    headerOccp: 4,
    headers: ['A', 'B', 'C']
  },
  computed: {
    computedDataset: function () {
      return this.dataset.reduce((pre, cur) => {
        if(pre.length % this.headerOccp === 0) {
          pre.push({'type':'header', 'data':this.headers})
        }
        pre.push({'type':'row', 'data':cur})
        return pre
      }, [])
    }
  }
})
.header {
  background-color: green;
  font-weight: bold;
}
.row {
  color: red;
}
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <table>
      <tbody>
      <tr v-for="(row, rowIndex) in computedDataset" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row.data" :key="cellIndex" :class="row.type">{{ cell }}</td>
      </tr>
  </table>
  <h3>Data:</h3>
  <p>
    {{computedDataset}}
  </p>
</div>

Leave a comment