Bootstrap vue perPage для пользовательских столбцов или строк

Question

У меня есть простой проект vue codesandbox с bootstrap-vue .

Для этого столбца есть несколько столбцов с картой и нумерацией страниц:

<template>

  <b-container>
    <b-row 
      :current-page="currentPage"
      :per-page="perPage">   

      <b-col cols="12" sm="4" class="my-1"
        v-for="item in items" 
          :key="item.id">

        <b-card           
          :bg-variant="item.variant"
          text-variant="white"
          header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

Поэтому я пытаюсь реализовать рабочую нумерацию для столбцов, аналогичную нумерации страниц для таблицы начальной загрузки .

На странице должны отображаться 2 столбца с карточкой = perPage: 2.

Вопрос: Как установить bootstrap-vue perPage для пользовательских столбцов или строк?

Answer 1

Если я правильно вас понял, все, что вам остается сделать - это разбить элементы на страницы. Вот рабочая Песочница Я добавил paginatedItems data и paginate и onPageChange методы.

Answer 2

Если вы хотите получить 2 карты на страницу, я предлагаю вам мое рабочее решение , используя вычисленные свойства, я создал одну, которую я назвал currentPageItems

computed: {
   ...
   
   currentPageItems() {
          let lengthAll =this.items.length;
      this.nbPages = 0;
        for (let i = 0; i < lengthAll; i = i + this.perPage) {
        this.paginated_items[this.nbPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.nbPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
    
    ...
  }

и я добавил эти свойства в data():

paginated_items: {},
currentPageIndex:0,
nbPages:0

в разделе шаблона измените items на currentPageItems

...
 <b-col cols="12" sm="4" class="my-1" v-for="item in currentPageItems" :key="item.id">
...

фрагмент кода:

<template>

  <b-container>
    <b-row>   
    
      <b-col cols="12" sm="4" class="my-1"
        :key="index"
        v-for="(item, index) in currentPageItems" 
          >
        <b-card         
          :bg-variant="item.variant"
          text-variant="white"
          :header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

<script>
const items = [
  {
    title: "Primary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "primary"
  },
  {
    title: "Secondary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "secondary"
  },
  {
    title: "Success",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "success"
  },
  {
    title: "Info",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "info"
  },
  {
    title: "Warning",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "warning"
  },
  {
    title: "Danger",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "danger"
  }
];

export default {
  name: "MyBootstrapGrid",
  data() {
    return {
      items: items,
      currentPage: 1,
      perPage: 2,
      totalRows: items.length,
      paginated_items: {},
      currentPageIndex:0,
      nbPages:0
    };
  },
  computed: {
    pageCount() {
      let l = this.totalRows,
        s = this.perPage;
      return Math.floor(l / s);
    },
      currentPageItems() {
          let lengthAll =this.items.length;
      this.nbPages = 0;
        for (let i = 0; i < lengthAll; i = i + this.perPage) {
        this.paginated_items[this.nbPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.nbPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>