Я хочу сделать пагинацию страниц на сайте.Нужно связать переменную "page" в родительском компоненте с оброботчиком событий "paginate()" в дочернем (BasePagination) классе.Вроде всё верно написал, и передеал переменную через v-model и обработчик событий сделал @:click.prevent=" paginate(pageNumber)"но почему то не работает
Родительский компонент
<template>
<section class="catalog">
<!-- Передаем к компоненту PeoductList массив товаров -->
<ProductList :products="products"></ProductList>
<BasePagination v-model="page" :count="countProducts" :car="car"></BasePagination>
</section>
</template>
<script>
import products from './data/products' // Получаем список товаров из файла products
import ProductList from './components/ProductList'; // Получаем компонент ProductList
import BasePagination from './components/BasePagination'
export default {
name: 'App',
components: {ProductList,BasePagination}, // Подключаем компоненты к файлу
data() {
return{
page: 1,
car: 3,
// Отправляем список в ProductList товаров по количеству ( переменная car) на одну страницу
}
},
computed:{
products(){
const offset = (this.page -1) * this.car;
return products.slice(offset,offset + this.car); //деление массива продуктов для поэтапного вывода на страницы
},
countProducts(){
return products.length;
}
}
};
</script>
Дочерний
<template>
<ul class="catalog__pagination pagination">
<li class="pagination__item">
<a class="pagination__link pagination__link--arrow pagination__link--disabled" aria-label="Предыдущая страница">
<svg width="8" height="14" fill="currentColor">
<use xlink:href="#icon-arrow-left"></use>
</svg>
</a>
</li>
<li class="pagination__item" v-for="pageNumber in pages" :key="pageNumber"> <!-- Перебираем страницы для вывода -->
<a href="#" class="pagination__link" @click.prevent=" paginate(pageNumber)"> <!-- Делаем жирным номер той цифры,на который сейчас находимся -->
{{pageNumber}} <!-- Выводи текущую страницу-->
</a>
</li>
<li class="pagination__item">
<a
class="pagination__link pagination__link--arrow"
href="#"
aria-label="Следующая страница"
>
<svg width="8" height="14" fill="currentColor">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</a>
</li>
</ul>
</template>
<script>
export default {
model:{
prop: 'page',
event: 'paginate',
},
props: ["page", "count", "car"],
computed: {
pages() {
return Math.ceil(this.count / this.car); // Получаем количество выводимых страниц для товаров на сайте
}
},
methods:{
paginate(page){
this.$emit('paginate',page);
}
}
}
</script>
