Using Vue.js to send user input data to a different page and trigger a method for submission

Question

I am seeking assistance with my first question and hope to receive your support.

In my setup, I have a catalogue page that includes a keyword search function and a main page with a search bar.

My objective is to automatically redirect any submission from the main search bar to trigger the keyword search on the catalogue page.

<button class="searchword" @click="search()"></button>

Within the destination URL, there is a method implemented as follows:

search: function() {
                this.search.keyword = this.search.value;
                this.submit_form();
            },

Answer 1

Answer №1

Hello there Denitsa! Welcome to the wonderful world of Stackoverflow.
I believe I have just the solution you're seeking:

this.$router.push({name:'catalogue-search', params:{keyword:this.search.value})

You'll need to set up a router.js file where you define your various pages.

For more information on Vue Router, check out this link: https://router.vuejs.org/guide/#html

Once you're on your CatalogueSearch page, you can access the keyword using:

this.$route.params.keyword

Remember, you push to '$router' but retrieve the value from '$route'.

Answer 2

Hello there Denitsa! Welcome to the wonderful world of Stackoverflow.
I believe I have just the solution you're seeking:

this.$router.push({name:'catalogue-search', params:{keyword:this.search.value})

You'll need to set up a router.js file where you define your various pages.

For more information on Vue Router, check out this link: https://router.vuejs.org/guide/#html

Once you're on your CatalogueSearch page, you can access the keyword using:

this.$route.params.keyword

Remember, you push to '$router' but retrieve the value from '$route'.