NUXT_FRONTEND/components/Catalog/List.vue

<template >
  <div class="catalog-list" ref="catalogList">
    <ul class="catalog-list__news" v-if="categoryNewsList">
      <CatalogItem
        v-for="(categoryNews, i) in categoryNewsList"
        :key="categoryNews.id"
        :categoryNews="categoryNews"
        :i="i"
      />
    </ul>

    <div class="catalog-list__actions">
      <button
        class="catalog-list__action button button_grey-load"
        :class="{ button_disabled: loadNewsCounter == pages }"
        @click="loadNews"
      >
        <span class="button__icon"> <BaseIcon :name="'refresh'" /></span>
        <span class="button__text">Показать еще</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    categoryNewsList: {
      type: Array,
    },
    pages: {
      type: Number,
    },
  },
  watch: {
    "$route.query.pagination": {
      handler(value) {
        this.counter = Number(value);
        this.loadNewsCounter = Number(value);
      }
    }
  },
  data() {
    return {
      list: [],
      counter: 1,
      loadNewsCounter: 1,
      filter: {},
    };
  },
  created() {
    this.counter = Number(this.$route.query.pagination) || 1;
    this.filter = this.$route.query.date_start ?
      {
        "date_start": this.$route.query.date_start,
        "date_end": this.$route.query.date_end,
      } : {};
  },
  computed: {
    count() {
      return Number(this.counter);
    },
  },
  methods: {
    loadNews() {
      this.filter = this.$route.query.date_start ?
        {
          "date_start": this.$route.query.date_start,
          "date_end": this.$route.query.date_end,
        } : {};
      this.loadNewsCounter++;
      this.$emit('loadMore', this.loadNewsCounter,this.filter);
    },
    async nextPage(page) {
      this.counter = page;
      window.scrollTo(0, 0);

      this.$router.push({
        name: this.$route.name,
        query: {
          pagination: this.counter.toString(),
          date_start: this.$route.query.date_start,
          date_end: this.$route.query.date_end,
        },
      });
    },
  },
};
</script>

<style lang="less">
@media screen and (max-width: 576px) {
  .catalog {
    &__container {
      padding: 15px 64px 56px 15px;
      @media (max-width: 576px) {
        padding: 15px;
      }
    }
    &__side {
      display: none;
    }
  }
  .catalog-item {
    &__side {
      max-width: 100%;
      margin-bottom: 15px;
    }
    &__figure {
      height: auto;
    }
  }
  .catalog-main {
    &__header {
      flex-wrap: wrap;
      margin-bottom: 10px;

      h1 {
        margin-bottom: 10px;
      }
    }
    &__filter {
    }
    &__subscribe {
      margin-left: 0;
    }
    &__title {
      margin-bottom: 10px;
    }
  }
}
</style>