要素の長さが特定の値を超えた場合に2行目を自動的に作成

Question

6つ以上の要素がある場合は、要素の半分が上に、残りの要素が下になるようにします。

現在、私は（Vue.jsで）このようにそれをやっている：

<table> 
    <tbody> 
     <template v-if="cards.length <= 6"> 
      <tr> 
       <td v-for="card in cards"> 
        {{ card }} 
       </td> 
      </tr> 
     </template> 
     <template v-else> 
      <tr> 
       <td v-for="card in cardsFirstHalf"> 
        {{ card }} 
       </td> 
      </tr> 
      <tr> 
       <td v-for="card in cardsSecondHalf"> 
        {{ card }} 
       </td> 
      </tr> 
     </template> 
    </tbody> 
</table> 

はこれを行うには良い方法はありますか？

Answer 1

それはあなたの要件スルーJS

https://jsfiddle.net/qapf3yfL/1/

HTML実装する方が簡単です：

<div id="app"> 
<table> 
    <tbody> 
      <tr v-for="row in rows"> 
       <td v-for="card in row"> 
        {{ card }} 
       </td> 
      </tr> 
    </tbody> 
</table> 
</div> 

JS：

new Vue({ 
    el: '#app', 
    data: { 
     max: 6, 
     cards: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7'] 
    }, 
    computed: { 
     rows() { 
      let cards = this.cards; 
      if (cards.length <= this.max) 
       return [cards] 

      var mid = Math.ceil(cards.length/2); 
      return [cards.slice(0, mid), cards.slice(mid)] 
     } 
    } 

})