Nuxt.js グリッドレイアウトのカラム指定のプロパティをバインド

動的にBootStrapVueのグリッドレイアウトの指定を変える

やりたい事

Blogサイトを作っている時に、Cardで見せている記事一覧を絞り込みをかけると1件表示になる時がある。
Bootstrap-vueでのレスポンシブレイアウトを指定するときは、md="4"等と指定するが、これはあくまで、画面の表示サイズに合わせてレイアウトを指定している。
1件しかないにも関わらず、グリッドの指定はmd="4"と３件づつ並べるレイアウト指定になってしまう等が起こる。
その為、1件しかない時はmd=12、2件の時はmd="6"を指定できる様にしたい。

方法

colsをバインディングできれば、表示item数によって場合分けをcomuputedですれば良さそう。

実装

<b-col
          v-for="post in items"
          :key="post.id"
          sm="6"
          :md="colParm"
          class="text-center d-flex justify-content-center my-3"
        >

export default {
  //中略
  data() {
    return {
      items: [] // 表示する記事情報の配列
    }
  },
  computed: {
    ...mapState(['posts']),
    colParm() {
      let colnum = '4' // デフォルト値、記事数が３以上の場合はこの数が入る
      if (this.items.length === 2) {
        colnum = '6'
      } else if (this.items.length === 1) {
        colnum = '12'
      }
      return colnum
    }
  }
  // 中略
}

まとめ

クラスに関わらず、プロパティ全般をバインド出来る様なので便利。
データ側でThemeなどを指定すれば、様々なレイアウトが指定できれば面白そう。