Как добавить несколько параметров запроса в URL - NuxtJS - PullRequest
Новая
       15

Как добавить несколько параметров запроса в URL - NuxtJS

0 голосов
/ 23 января 2019

Я создаю приложение электронной коммерции nuxt.У меня ситуация, когда у меня есть более 10000 элементов в категории, и я хочу создать соответствующие фильтры для продуктов.У меня вопрос, как мне добавить URL (добавить и удалить параметры запроса), чтобы я мог фильтровать продукты.Я пробовал что-то вроде этого, добавив событие change к! 

      <ul>
        <li>
          <b-form-checkbox @change="filterProduct">
            <label class="ui__label_checkbox">Apple</label>
          </b-form-checkbox>
        </li>
         <li >
          <b-form-checkbox @change="filterProduct">
            <label class="ui__label_checkbox">Mango</label>
          </b-form-checkbox>
        </li>
      </ul>

methods:{
  filterProduct() {
      this.$router.push({ query: Object.assign({}, this.$route.query, { random: "query" }) });

    },
}

Этот подход делает добавление URL только один раз, но удаляет проверенное состояние флажка, который я не '* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * T0 * * * * * * * * * * * * * * * * * * * 1009

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Вот что вы должны сделать.Прежде всего, вы должны установить все ваши фильтры в data()

data() {
    return {
        filter: {
            first: this.$route.params.first || null,
            second: this.$route.params.second || null,
            third: this.$route.params.third || null
        }
    }
}

Затем вы настраиваете наблюдатель, который срабатывает при изменении любого фильтра, очевидно, вам нужно v-моделировать входы в вашем <template>к полям в data()

watch() {
    filter: {
        handler(newFilters) {
            const q = complexToQueryString({
                ...this.filter,
            })

            const path = `${this.$route.path}?${q}`
            this.$router.push(path)
        }
    }
}

Функция complexToQueryString - моя вещь, которая удаляет нулевые значения из запроса, а также работает для фильтров, которые являются массивами.Я сделал это, потому что мой API читает null как String 'null'. 

const complexToQueryString = (object, parentNode = null) => {
    const query = Object.entries(object).map((item) => {
        const key = parentNode ? `${parentNode}[${item[0]}]` : item[0]
        const value = item[1]

        if (Array.isArray(value)) {
            return arrayToQueryString(value, key)
        } else if (value instanceof Object) {
            return complexToQueryString(value, key)
        } else if (item[1] !== undefined) {
            return [
                Array.isArray(item[0]) ? `${key}[]` : key,
                encodeURIComponent(item[1]),
            ].join('=')
        }

        return ''
    })
        .filter(empty => empty)
        .join('&')

    return query
}

Теперь это должно работать, если вы измените значение фильтра, тогда data.filter.first изменит значение, которое запускает наблюдатель,который обновляет URL.

Самое лучшее в этом подходе - это то, что теперь вы можете копировать и вставлять URL, а фильтр точно такой же и возвращает тот же результат.

0 голосов
/ 23 января 2019

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

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

routes: [{
        path: '/path',
        component: Component,
        props: (route) => ({
            filter1: route.query.filter1,
            filter2: route.query.filter2,
            filter3: route.query.filter3
        })
    }]
...