Vue Bootstrap 4 中的三列复选框

Question

任何人都可以在这里通过 bootstrap-4 中的 vue-js 帮助我进行 3 列布局。我想让我的复选框显示为 3 列。用户按顺序排列，我希望顺序从第一列向下，然后在第二列，最后在第三列。

<div v-for="(user, index) in users">
  <div class="{'controls' : (index % (users.length/3)===0)}">
    <input type="checkbox" :id="'user_'+user.id" :value="user.id" class="form-check-input" v-model="form.checkedUsers">
    <label class="form-check-label" for="'user_'+userr.id">
      <img :src="user.photo_url" class="small-photo mx-2"> @{{ user.first_name }} @{{ user.last_name }}
    </label>
  </div>
</div>

谢谢

Answer 1

使用 Vue 方法使用数组“块”方法将项目分为 3 组。使用嵌套的v-for 重复组，然后是每个组中的项目。这会将它们按顺序排列在 3 列中从上到下...

Vue2 控制器：

  methods: {
    chunk: function(arr, size) {
      var newArr = [];
      for (var i=0; i<arr.length; i+=size) {
        newArr.push(arr.slice(i, i+size));
      }
      this.groupedItems  = newArr;
    }
  },

标记：

<div class="container" id="app">
    <div class="row">
        <div class="col-sm-4 py-2" v-for='(g, gIndex) in groupedItems'>
            <form class="form-inline" v-for='(item, index) in g'>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox">
                    <label class="form-check-label">
                     {{ item.name }}
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>

演示： https://www.codeply.com/go/ZaiUsUupsr

---

替代选项是将它们放在 3 列中而不在循环中每 3 个项目重新迭代 .row。所有的复选框都可以放在一个 row 中，它们将按 从左到右的顺序排列在 3 列中。

演示： https://www.codeply.com/go/3gOvXFzaOw

<div class="container">
    <div class="row">
        <div v-for="item in items" class="col-sm-4 py-2">
            <form class="form-inline">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" >
                    <label class="form-check-label">
                        {{ item.name }}
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>