NUXT JS dynamic multiple search query parameters

Question

Please, I am new to NUXT JS and need help.

I have a search page where the search bar is located in its header component which is shared across pages, and upon submitting, it goes to the search page and the search logic is done in the store store/search.js

The issue is that no matter what I search and the parameters;

I cannot get the values of the query to show on the browser URL like search?Q=jump&color=yellow
Since my search logic is in the store, I am confused about how to pass parameters from the URL and searching dynamically like that.

below is my code

search bar component

<input type="text" class="search-input" placeholder="Search for a location" @keypress="search">

methods: {
        search(event) {
            const btn = event.key;
            if (btn === "Enter") {
                const search_terms = event.target.value;
                this.$store.dispatch("search/search", search_terms);
                this.$router.push('/search');
            }
        }
    }

store store/search.js

export const state = () => ({
    result: []
})
 
export const mutations = {
    searchTerms(state, text) {
        state.searchTerms = text
    },
    searchResult(state, result) {
        state.result = result
    }
}
 
export const actions = {
    search(vuexContext, search_terms) {
        vuexContext.commit('loadingTrue')
        return this.$axios
        .$get('https://help.herokuapp.com/place', { params: 
            {
            search: 'lagos',
            idealfor: ["production"],
            page: 1,
            limit: 12,
            }
        })
        .then(data => {
            let searchResult = data.results
            vuexContext.commit('searchResult', searchResult)
        })
        .catch(e => {
            console.log(e)
        })
    },
}
 
export const getters = {
    searchResult(state) {
        return state.result
    },
}

i would like the search bar to show like localhost:3000/search?search=lagos&page=1&limit=12&idealfor=["production"]

and when the link is sg[shared and also visited the desired result would show.

please how would you go about this in Nuxt and are there resources anyone can recommend that would help me with this.

@kissu yeah a bit, but I eventually gave up on it for now as I still have some issues, I have marked your answer as it was the best I could get so far. — Opeyemi Odedeyi
– Opeyemi Odedeyi, Commented Jul 6, 2021 at 19:33

fevid · Accepted Answer · 2021-06-27 06:06:22Z

2

you can update url's query by using $router.push to the same page with query included, it won't refresh the page and only updates the query.

for example:

this.$router.push('/search?search=lagos&page=1&limit=12&idealfor=["production"]');

you can access query values using $route.query. if you want to show the result when the link is visited, you need to check for $route.query in mounted cycle and dispatch it to the store to get the results.

answered Jun 27, 2021 at 6:06

fevid

7532 gold badges7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-06-27 09:52:37Z

1

You can achieve it by creating the following action

async moveToGivenPathWithQuery({ _ }, { q = {}, color = {} }) {
  // eslint-disable-next-line no-undef
  await $nuxt.$router.push({ path: 'search', query: { q, color } })
},

index.vue

<template>
  <div>
    <button @click="moveToGivenPathWithQuery({ q: 'jump', color: 'yellow' })">
      Go to search
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('search', ['moveToGivenPathWithQuery']),
  },
}
</script>

search.vue

<template>
  <div>Search page</div>
</template>

<script>
export default {
  mounted() {
    console.log('query received', this.$route.query)
  },
}
</script>

answered Jun 27, 2021 at 9:52

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Collectives™ on Stack Overflow

NUXT JS dynamic multiple search query parameters

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related