Как написать сортировку галереи работы на vue?

Question

[Дмитрий]

Есть галерея с изображениеми работ, какой метод можно написать чтобы реализовать отрисовку тех работ в зависимости от активной категории?

<template>
  <div class="page-content page-content--works">
    <ThePageHeader
      background="/images/pvc.png"
      :name="'Галерея работ'"
      :center="true"
    />

    <section class="section articles">
      <div class="container">
        <div
          class="articles__tab-titles"
          ref="tabTitles"
        >
          <span
            v-for="(tab) in tabs"
            :key="tab.id"
            :ref="`tab_${tab.id}`"
            class="articles__tab-title"
            :class="{
              active: activeTabId === tab.id
            }"
            @click.prevent="changeActiveTabById(tab.id, $event)"
          >{{ tab.name }}</span>
        </div>

        <div class="articles__items articles__items--works">
          <img
            v-for="(work) in works"
            :key="work.id"
            :src="work.image"
            alt
          />
        </div>

        <div class="articles__pagination pagination">
          <a href="#!" class="pagination__item pagination__item--arr-prev"> <Icon name="arr_right" /> </a>
          <a href="#!" class="pagination__item">1</a>
          <a href="#!" class="pagination__item current">2</a>
          <a href="#!" class="pagination__item">3</a>
          <span class="pagination__item pagination__item--dots">...</span>
          <a href="#!" class="pagination__item">23</a>
          <a href="#!" class="pagination__item pagination__item--arr-next"> <Icon name="arr_right" /> </a>
        </div>
      </div>
    </section>
  </div>

</template>

<script>
export default {
  layout: 'default',
  data() {
    return {
      tabs: [
        { id: '1', name: 'Все работы', category: 'doors' },
        { id: '2', name: 'Окна', category: 'windows' },
        { id: '3', name: 'Двери', category: 'doors' },
        { id: '4', name: 'Ролеты', category: 'rollers' },
        { id: '5', name: 'Ворота', category: 'gates' },
        { id: '6', name: 'Системы затенения', category: 'shading' },
        { id: '7', name: 'Аксессуары', category: 'accessories' }
      ],
      works: [
        { id: 1, image: '/images/works-page/1.png', category: 'doors' },
        { id: 2, image: '/images/works-page/2.png', category: 'shading' },
        { id: 3, image: '/images/works-page/3.png', category: 'doors' },
        { id: 4, image: '/images/works-page/4.png', category: 'windows' },
        { id: 5, image: '/images/works-page/5.png', category: 'rollers' },
        { id: 6, image: '/images/works-page/6.png', category: 'windows' },
        { id: 7, image: '/images/works-page/7.png', category: 'shading' },
        { id: 8, image: '/images/works-page/8.png', category: 'gates' },
        { id: 9, image: '/images/works-page/9.png', category: 'accessories' },
        { id: 10, image: '/images/works-page/10.png', category: 'windows' },
        { id: 11, image: '/images/works-page/11.png', category: 'accessories' },
        { id: 12, image: '/images/works-page/12.png', category: 'windows' },
      ]
    }
  },
  computed: {
    activeTabId() {
      return this.$route.query.type
    },
    activeTabElement() {
      return this.$refs['tab_'+this.activeTabId][0]
    }
  },
  methods: {
    changeActiveTabById(id) {
      this.$router.push({path: this.$route.path, query: { type: id }})
      setTimeout(() => {
        this.$refs.tabTitles.style.setProperty('--liner-width', this.activeTabElement?.offsetWidth || 0)
        this.$refs.tabTitles.style.setProperty('--liner-offset-left', this.activeTabElement?.offsetLeft || 0)
        this.activeTabElement.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'nearest'
        })
      }, 0)
    },
    resizeListener() {
      this.changeActiveTabById(this.activeTabId)
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.activeTabId === undefined) {
        this.changeActiveTabById(1)
      } else {
        this.changeActiveTabById(this.activeTabId)
      }
    })
    window.addEventListener('resize', this.resizeListener)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeListener)
  }
}

</script>

<style scoped lang="scss">
@use '~assets/scss/components/articles';
@use '~assets/scss/components/pagination';

</style>

Comments

[0xD34F]

В заголовке вопроса:

написать сортировку

В основном тексте:

реализовать отрисовку тех работ в зависимости от активной категории

Оказывается, вы не знаете, что такое сортировка. Разберитесь. И исправьте вопрос.

Answer 1

[0xD34F]

Сделайте вычисляемое свойство, которое будет представлять данные, соответствующие выбранной категории:

computed: {
  filteredWorks() {
    const category = this.tabs.find(n => n.id === this.activeTabId)?.category;
    return category равна той, что у 'Все работы'
      ? this.works
      : this.works.filter(n => n.category === category);
  },

<div class="articles__items articles__items--works">
  <img v-for="n in filteredWorks" :key="n.id" :src="n.image">
</div>

tabs: [
  { id: '1', name: 'Все работы', category: 'doors' },
  { id: '2', name: 'Окна', category: 'windows' },
  { id: '3', name: 'Двери', category: 'doors' },

Почему у category одинаковые значения (doors)? Надо исправить.