かとのぼのマイコード・マイライフ

エンジニア兼ウェブサービス開発者のプログラミングと雑記ブログ

BulmaでVue.jsのv-forを使って複数行に跨るカラムを配置したい場合【Vue.js】【Bulma】【Buefy】

この記事は、フロントエンドに「Vue.js」、CSSレイアウトに「Bulma」もしくは「Buefy」を使っていて、要素数がわからない項目で「v-for」を使ってカラムの複数行の折り返しを実現する方法について書いています。

Bulmaのグリッドシステム

Bulmaで、複数行のカラムを配置したい場合があります。その場合はBulmaの公式ドキュメントの一番ベーシックな方法で配置できます。

https://bulma.io/documentation/columns/basics/

<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>

大体はこれで問題ありません。

複数行を折り返して配置したい場合は「is-multiline」

グリッドシステムのレイアウトはトータルで「12」ですから、これを超えてしまうと配置がおかしくなります。

そのため、複数行を折り返して配置したい場合は、親要素の「colums」に「is-multiline」を追加します。

細かくはこのサイトがわかりやすいです。

知っておくと少し幸せになれるBulmaを使い方6選 | とんよー。ブログ

Vue.jsの「v-for」を使うとうまく配置できない!?

さて、ここからが本題です。Vue.jsを使って複数行の折り返しのレイアウトを行う場合ですと、ちょっと面倒なことが起こります。

普通に「v-for」を使ってループさせると、都度カラムを判断する前にレイアウトが描写されてるため、横に並んでくれなくなります。

解決策:「culumn」要素に「v-for」を入れる

おそらくこの方法が一番簡単な方法です。

今回は仮に配列「posts」を「v-for」で回す場合とします。

<div class="columns is-multiline">
<div class="column is-one-third" v-for="post in posts">
{{ post }}
</div>
</div>

ポイントは、親要素の「columns」には「is-multiline」を入れて複数行に跨がれるようにすることと、「v-for」を子要素の「columns」と同じところで記述することです。このようにすればいくつか事前に決まっていない項目でも復習行に跨った状態を実現できます。

 

参考:

https://tonyo.design/program/bulma/good_6_things_to_know_about_bluma/

https://forum.vuejs.org/t/v-for-with-css-responsive-grid/7164