How to recalculate the number of bootstrap columns in vue?

Question

Bootstrap

Hello. There is a grid of several blocks (employees of the company). By default in the template, 3 employees are divided by col-sm-4. How to dynamically change the number of columns based on the number of employees using vue?

Answer 1

<div class="row">
  <div v-for="user in users" v-bind:class="userClass">></div >
</div >

const vm = new Vue({
  el: '#app',
  data: {
    users: [],
  },
  computed: {
    userClass() {
      // ваша логика разделения по колонкам
      return this.users.length > 3 ?  'col-sm-4' :  'col-sm-12';
    },
  },
});