Vue-router doesn't redirect with @click

Question

Template:

<button @click="redirect">Search</button>
<input v-model="searchQuery" v-on:keyup.enter="redirect" type="text">

Js script:

export default {
  methods: {
    redirect: function() {
      if (this.searchQuery) {
        this.$router.push({
          name: 'tag',
          params: {
            tag: this.searchQuery
          }
        })
      }
    }
  },
  data() {
    return {
      searchQuery: ''
    }
  }
}

Here's the problem. If I click enter in the input, the redirection will work fine to the route with name tag. If I click the button, the redirection will try to happen (I will see in browser url the change) but then instantly it will go back to the existing page

the provided code has no problem. The issue is probably caused by something else. — Jacob Goh
– Jacob Goh, Commented Mar 2, 2018 at 13:43

Jacob Goh · Accepted Answer · 2018-03-02 13:48:19Z

2

I suspect that you have a <form> tag wrapping the button and input. And the button click trigger form submission so the page reload and returns to the same page.

Try modifying the click event into @click.prevent="redirect".

.prevent will have the effect of event.preventDefault() on the click event.

Will delete this answer if using <form> is not the reason.

answered Mar 2, 2018 at 13:48

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

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

1 Comment

Diolor Over a year ago

Thanks Jacob. The form was the issue indeed. prevent helped 👍🏻

samayo · Accepted Answer · 2018-03-02 13:40:49Z

0

I don't know what is causing the error. Maybe check if this.searchQuery has a value when you try to redirect with the click event. In either case, I think you are better of using <router-link /> to redirect your page. If you want the router-link to look like a button then pass tag='button' as in this example:

<router-link tag='button' :to="{ name: 'tag', params: { tag: this.searchQuery }}"> search </router-link>

answered Mar 2, 2018 at 13:40

samayo

16.5k13 gold badges95 silver badges115 bronze badges

1 Comment

Diolor Over a year ago

Yes that will work. But with that example then the searchQuery is empty there is a console log warning

Collectives™ on Stack Overflow

Vue-router doesn't redirect with @click

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related