Vue-material: router-link on md-button not work

Created on 27 Jun 2017  路  5Comments  路  Source: vuematerial/vue-material

Steps to reproduce

I've changed to PROP of router-link in button doc page but nothing happens, but when i changed the a href tag it works.
In general router-link when tag is a custom component link md-button or md-option doesn't work. UI is OK but routing does not happen.

Which browser?

I checked all browsers and i use Vue 2.

What is expected?

We expect when we use this code, it render a md-button that when we click on it route to /components/button1.

<router-link tag="md-button" to="/components/button1" class="md-raised md-primary">Router Link</router-link>

What is actually happening?

It renders button but when we click on it, nothing happen.
I checked this with md-option tag to.

All 5 comments

```
go to link

        methods: {
           setRoute(id){
                this.$router.push(id)
            },//setRoute

OR....

    <router-link to="/components/button1" >
    <md-button>
    Router Link
    </md-button>
    </router-link>

麓麓麓

Thank you @martinandersen3d , I've did the same thing you suggested first.
but it's not solution, it's a trick, what if we use md-card, md-option and other components?

```
EXAMPLE 1 & solution to your answer:
Project

EXAMPLE 2:

<md-menu>
<md-button class="md-icon-button" md-menu-trigger>
    <md-icon>account_circle</md-icon>
</md-button>

<md-menu-content>
    <md-menu-item @selected="$router.push({ name: 'Account' })">Account</md-menu-item>
    <md-menu-item @selected="$router.push({ name: 'Logout' })">Logout</md-menu-item>
</md-menu-content>
</md-menu>

Link: https://github.com/vuematerial/vue-material/issues/785

you are probably going to use this sooner or later:

 <md-button id="somename" @click.native="myMethod">Project</md-button>


methods: {
    myMethod(event){
            alert(event.target.id) //will output "somename"
    }
},//methods

above is ES6 syntax. See how its used with the arrow function here https://vuejs.org/v2/api/#methods

Thank you @martinandersen3d :D

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lovepluskaka picture lovepluskaka  路  3Comments

markus-s24 picture markus-s24  路  3Comments

maryleloisa picture maryleloisa  路  3Comments

xinzhanguo picture xinzhanguo  路  3Comments

sergey-koretsky picture sergey-koretsky  路  3Comments