Почему не работает V-model?

Question

[B00mZ00m]

Я хочу сделать пагинацию страниц на сайте.Нужно связать переменную "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>

Answer 1

[Сергей Соколов]

Дочерний эмитит событие: this.$emit('paginate',page);
но родительский его не слушает и не обрабатывает.

См. https://vuejs.org/guide/components/events.html

В родительском надо что-то типа:

- <BasePagination v-model="page" :count="countProducts"  :car="car"></BasePagination>
+ <BasePagination @paginate="paginate" :count="countProducts"  :car="car"></BasePagination>

и добавить метод обработчик сего:

methods: {
  paginate(page) {
    this.page = page;
  },
},

Comments

[B00mZ00m]

Помогло,большое спасибо!