vue bootstrap c-card 每行固定數量


fetchData() {

    getList().then(response => {

                this.list1s = response.data;

                var list = response.data;

                var arrTemp = [];

                var index = 0;

                var sectionCount = 7;

                for (var i = 0; i < list.length; i++) {

                    index = parseInt(i / sectionCount);

                    if (arrTemp.length <= index) {

                        arrTemp.push([]);

                    }

                    arrTemp[index].push(list[i]);

                }

                // return arrTemp;

                this.listTemp = arrTemp

                // console.log("arrTemp")

                console.log(this.list1s)

      })

  }


<b-card-group deck class="mb-7" v-for="(row,i) in listTemp">

                <!-- <b-card border-variant="primary"

                  header="Primary"

                  header-bg-variant="primary"

                  header-text-variant="white"

                  align="center"

                  v-for="list in lists">

                  <p class="card-text">{{list}}</p>

              </b-card> -->

              <!-- <li v-for="list in lists">{{list.title}}</li> -->

                <!-- <b-card border-variant="primary"

                  header="Primary"

                  header-bg-variant="primary"

                  header-text-variant="white"

                  align="center"

                  v-for="(cell,j) in row">

                  <p class="card-text">{{cell.id}}</p>

              </b-card> -->

              <b-card

                        img-alt="Card image"

                        img-top

                        v-for="(cell,j) in row">

                    <p class="card-text">

                      <b-link target="_blank" :href="cell.address">{{cell.title}}</b-link>

                        <!-- {{cell.address}} -->

                        <!-- <img slot="img" width="30" height="10" :src="'http://localhost/api/public/uploads/' + cell.files_address"/> -->

                        <!-- <img :src="'http://localhost/api/public/uploads/' + cell.files_address" ></img> -->

                    </p>

                </b-card>

              </b-card-group>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章