夕蛙のなく頃に

データアナリストとして学んだことや趣味で勉強し始めたIoTをアウトプットする

Vueで1次元配列を、任意の数の1次元配列の集まりに分割する

Vue

なにこれ

Vueにて、配列(Array)を展開し、決めた列数でネストした要素を羅列するための方法についてです。

fruits = ['apple', 'grape', 'melon', 'orange', 'pear']
<div class="columns">
    <div class="column">apple</div>
    <div class="column">grape</div>
</div>
<div class="columns">
    <div class="column">melon</div>
    <div class="column">orange</div>
</div>
<div class="columns">
    <div class="column">pear</div>
</div>

columnsの下にcolumnを並べることで、UIフレームワークによって簡単に整列した見た目を用意することができます。

ex) Columns powered by Flexbox | Bulma

方針

  1. 配列を小さい配列の集まりに分割する
  2. v-forを2回行って、小さい配列の集まりを展開する

実装

1. 配列を 小さい配列の集まり に分割する

Array型を拡張する形で、chunkプロパティを追加します。

Object.defineProperty(Array.prototype, "chunk", {
  value: function (chunkSize) {
    var array = [];
    for (var i = 0; i < this.length; i += chunkSize)
      array.push(this.slice(i, i + chunkSize));
    return array;
  },
});

こうすることで以下のように小さい配列の集まりに分割することができます。

fruits.chunk(3)
--> [['apple', 'grape', 'melon'], ['orange', 'pear']]

fruits.chunk(2)
--> [['apple', 'grape'], ['melon', 'orange'], ['pear']]

2. v-forを2回行って、小さい配列の集まりを展開する

html側でv-forを2層にわたって記述することで、ネストした展開をすることができます。

以下は再現する全コードです。

index.html

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <div class="columns" v-for="rowFruits in chunkedFruits">
      <div class="column" v-for="fruit in rowFruits">
        {{ fruit }}
      </div>
      <hr>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="main.js"></script>
</body>

</html>

main.js

Object.defineProperty(Array.prototype, "chunk", {
  value: function (chunkSize) {
    var array = [];
    for (var i = 0; i < this.length; i += chunkSize)
      array.push(this.slice(i, i + chunkSize));
    return array;
  },
});

var app = new Vue({
  el: '#app',
  data: {
    fruits: [
      'apple', 'grape', 'melon', 'orrange', 'pear'
    ]
  },
  computed: {
    chunkedFruits() {
      return this.fruits.chunk(2)
    }
  }
})

その他

やっている内容を簡潔にタイトルにする用語理解ができていないかも...

もっとわかりやすいタイトルにしたい。