CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22794

Button click of a Card component does not work in Vuetify

I use a Card component of Vuetify, and in the actions you can create buttons.

But I noticed clicks on such buttons do not work (Codepen):

<v-card-actions>
    <v-btn flat color="orange" @click="alert(888)">Share</v-btn>
    <v-btn flat color="orange">Explore</v-btn>
</v-card-actions>

I tried with native (@click.native="alert(888)") but the click does not work in that case either.

What am I missing?

Upvotes: 0

Views: 5341

Answers (1)

thanksd
thanksd

Reputation: 55664

The inline handler for the click event is scoped to the Vue instance, not the window. So Vue is looking for an alert method on your component and not finding one.

Simply add a method to your component to call alert:

methods: {
  onClick() {
    alert(888);
  }
}

And then use that as the click handler instead:

<v-btn flat color="orange" @click="onClick">Share</v-btn>

Here's a working version of your codepen example.

Upvotes: 3

Related Questions