Как в представлениях VUE через router vue передавать массив с данными а на template отображать уже отфильтрованный результат из базы данных?

Question

[KORICA67]

Который день ломаю голову и не могу сообразить
есть 10 ссылок на категории товаров в router vue ,как мне при переходе на этот элемент (страницу) получать уже отфильтрованные товары по этой категории

Answer 1

[Владимир Коротенко]

Хм ну пусть у вас будет сохраненный id запроса со всеми фильтрами, в итоге вы в маршруте передаете только id этого запроса.

Мысль понятна?

Comments

[KORICA67]

если честно без образца не очень понятно..

[Владимир Коротенко]

KORICA67,

кусок роутера

{
          path: 'store/:id?',
          name: 'UserStore',
          component: () => import('@/views/user/Store.vue'),
        },

кусок вьюшки

if (this.$route.params.id) {
          result = await this.$api.store.get(this.$route.params.id)
        } else {
          result = await this.$api.store.fetch()
        }

[KORICA67]

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

<v-products
    inline-template
    :products="products"
    :selected=[116,324,113,144,119,120,150,453,395,140,449,146,125,425,126,154,143,461,155,394,77,138,459,503,508,130,133,505,115,457,134,455,450]>
    <div
        class="products js-product-list"
        :class="!productsLoaded && 'is-loading'"
        v-cloak
    >
        <div class="container">
            <div class="products__header js-products-header">
                <h1 class="products__title">Сеты</h1>
            </div>

[KORICA67]

по вашему рецепту получаю вот эту ошибку

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dn/Desktop/my_fourth_arigato/src/components/categories/pizza.vue: Unexpected reserved word 'await'. (74:19)

  72 |         console.log("123")
  73 |               if (this.$router.params.id) {
> 74 |           result = await this.$api.store.get(this.$router.params.id)
     |                    ^
  75 |         } else {
  76 |           result =  await this.$api.store.fetch()
  77 |         }

[Владимир Коротенко]

KORICA67, ну не копируйте тупо

await имеет место только в async функции

Это вообще мой код, у вас его нет
this.$api.store.get(this.$router.params.id)

async initialize () {
        if (this.$route.params.id) {
          this.showBreadcrumbs = true
          this.headers = [
            {
              text: nameCol,
              align: 'start',
              sortable: false,
              value: 'title',
            },
            { text: createdCol, value: 'created' },
            { text: actionCol, value: 'actions', sortable: false },
          ]
        }
        // this.bkItems.push(this.bkRoot);
        var result
        if (this.$route.params.id) {
          result = await this.$api.store.get(this.$route.params.id)
        } else {
          result = await this.$api.store.fetch()
        }

        this.desserts = []
        if (result.breadcrumbs) {
          this.bkItems = result.breadcrumbs
        }
        if (result.stores) {
          result.stores.forEach((element) => {
            if (element.created !== 0 || element.created !== '') {
              const utc = new Date(element.created * 1000)
              const str = moment(utc).format('YYYY-MM-DD')
              element.created = str
            } else element.created = ''
            if (element.openDate !== 0) {
              console.log(element.openDate)
              const utc = new Date(element.openDate * 1000)
              const str = moment(utc).format('YYYY-MM-DD')
              element.openDate = str
            } else element.openDate = ''
            if (element.modified !== 0 || element.modified !== '') {
              const utc = new Date(element.modified * 1000)
              const str = moment(utc).format('YYYY-MM-DD')
              element.modified = str
            } else element.modified = ''
          })

          this.desserts = result.stores
        }
      },

[KORICA67]

Владимир Коротенко, извните ,только начинаю, ошибаюсь,я нашел еще такую функцию,может ее приминение более оправдано?

<template>  <ul>    <li v-for="products in productsOnSale" :key="product._id">      {{ product.name }}    </li>  </ul></template><script>export default {  data() {    return {      products: [],    }  },  computed: {    productsOnSale: function () {      return this.products.filter((product) => product.onSale)    },  },}</script>

[Владимир Коротенко]

KORICA67,

Для чего?
тут есть отображение отфильтрованного списка по полю onSale
список продуктов products (пустой кстати)

[KORICA67]

Владимир Коротенко, может я не очень правильно задал вопрос у меня по умолчанию через vuex передается массив из общего количества продуктов в 300+ экземпляров ,в целом,в нужной категории массив я получаю а вот отобразить его отфильтрованным допустим из 25 позиций не могу без элемента select ,так в этот массив пустой же можно push ить продукты c помощью примерно такой функции наверное...

myActionFilter(category) {
            this.sortedProducts = [];
            let vm = this;
            this.PRODUCTS.map(function (item) {
                if (item.category === category.name) {
                    vm.sortedProducts.push(item);

[KORICA67]

Владимир Коротенко, тем более что с помощью вот этого вычисления

productsOnSale: function () {  

        return this.PRODUCTS.filter((product) => product.type) 
        
         },

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

[Владимир Коротенко]

KORICA67, это можно сделать несколькими методами.

1. у вас в сторе уе есть эти данные. Вы просто применяете фильтр и рендерите табличку
2. вы вообще плюете на стор, на создании элемента вы выбираете данные на основе фильтра в маршруте и отображаете их
3. Комбинируете оба подхода

[KORICA67]

какой метод лучше? и можно чуть подробнее про первый ?