Vue-material: Click event on md-card not triggered

[nirkki]

Click event is not triggered for the md-card. It is triggered for the wrapper div and for the action buttons inside the card as well. But not when set to the card itself - unless @click.native is used.

<template>
  <div @click="onClick"> <!-- Works OK -->
    <md-card @click="onClick"> <!-- @click is not working (@click.native is) -->
      <md-card-actions>
        <md-button @click="onClick">Action</md-button>  <!-- Works OK -->
      </md-card-actions>
    </md-card>
  </div>
</template>

[VdustR]

md-card don't have click event API.

You have to use click.native to bind event to the $el in md-card.

https://vuematerial.io/components/card

[nirkki]

You are right, @VdustR - my mistake. Must read the docs more carefully.

[rayfoss]

We get there is no api... but <h2 @click="$router.go(-1)">Essential Links</h2> will work. That seems like strange behaviour. md-with-hover makes the card look clickable. Specially when there is only one action, which there was a way to specify I want that action to be the default.

Side issue... for some reason my md-card-header loses the md-card-header-flex class after being clicked, which causes a brief flash during the transition out.

[simonmaass]

could someone help me how i create a click event for an md-card

[RPGStupe]

You can just wrap your card content with a <div>-element and make it clickable like this:

```

This card is clickable!

[puresick]

md-card don't have click event API.

You have to use click.native to bind event to the $el in md-card.

https://vuematerial.io/components/card

Is there any information about this in the current documentation?
The destination of that link does not include any information about @click.native.

Edit: .native in the vuejs docs for the sake of completion: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

[aharonkoss]

Click event is not triggered for the md-card. It is triggered for the wrapper div and for the action buttons inside the card as well. But not when set to the card itself - unless @click.native is used.

<template>
  <div @click="onClick"> <!-- Works OK -->
    <md-card @click="onClick"> <!-- @click is not working (@click.native is) -->
      <md-card-actions>
        <md-button @click="onClick">Action</md-button>  <!-- Works OK -->
      </md-card-actions>
    </md-card>
  </div>
</template>

a tag works the best!