CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4vuejs2
jmcj07
jmcj07

Reputation: 3

How do I use a click event to navigate to another page

I'm using vue-bootstrap, I have several cards, each with a button in them, every button in these cards should take me to a different form, the problem is that I don't know how to make these buttons take me to the URL where these forms are, here's my code:

<b-card
  v-for="item in cards"
  :key="item.id"
  :title="item.title"
  :img-src="item.imagen"
  tag="article"
  style="max-width: 17rem;"
  class="card"
>
  <router-link :to="{name: 'signUp', params:{id:item.title}}">
    <b-button variant="primary" onClick="location.reload();" >Go {{ item.title }}</b-button>
  </router-link>
</b-card>

For some reason the location.reload() method on the onClick event sometimes allows me to see the forms.

Any help is appreciated!

Upvotes: 0

Views: 1630

Answers (2)

Rijosh
Rijosh

Reputation: 1544

The router-link will redirect to the path :to="{name: 'signUp', params:{id:item.title}}" on click. You don't need to add the button click event inside.

If you're trying to navigate to the route singUp on clicking button, you can use

  <router-link :to="{name: 'signUp', params:{id:item.title}}" tag="button">
      Go {{ item.title }}
  </router-link>

OR

<b-button variant="primary" onClick="$router.push({name: 'signUp', params:{id:item.title}})" >Go {{ item.title }}</b-button>

Which will redirect you to the route with name signUp.

Upvotes: 0

Greyson R.
Greyson R.

Reputation: 460

Instead of location.reload(), you should be using window.location.href='path-to-form'

Upvotes: 1

Related Questions