CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Hayreddin Tüzel
Hayreddin Tüzel

Reputation: 949

Vuetify v-btn click event

I am using vuetify and I am trying to call a method when v-btn component clicked. But it seems it is not working.

it is my code:

<v-btn @click="bookmarkSave()">
    <v-icon v-if="!isBookmarked">bookmark_border</v-icon>
    <v-icon v-else>bookmark</v-icon>
</v-btn>

and I declared a method in the component (in methods section) like that:

bookmarkSave : async function () {
                  const response = await axios.get('api/bookmark-kaydet?voice_id=' + this.audio.id);
                 console.log(response);
               }

but I couldn't call bookmarkSave() method on click event. Also, I tried .native option, too. Are there any idea what is wrong with my code? or who want to show me use click event on v-btn component

When I click button, there are no console eror or network log. I can see only some output on vue tool. I added an image about that. enter image description here

Upvotes: 6

Views: 53995

Answers (3)

Osmon
Osmon

Reputation: 9

https://github.com/vuetifyjs/vuetify/issues/35#issuecomment-269239541

When used on a component, v-on now only listens to custom events $emitted by that component. To listen for a native DOM event on the root element, you can use the .native modifier. For example:

Upvotes: 1

s_qw23
s_qw23

Reputation: 364

I ran into the same problem.

The solution for me was to stop propagation of the click event:

<v-btn @click.stop="showInput = false">

I had the following structure:

<v-list> 
  <v-list-item @click="showInput = true">
     ....
     <v-btn @click="showInput = false">
     ....

While clicking on the list item worked flawlessly, clicking the button didn't work. What happend is that the click event propagated to the list item and resert showInput to true.

Upvotes: 1

Andr&#233; Am&#226;ncio de Moraes
Andr&#233; Am&#226;ncio de Moraes

Reputation: 21

Attaching .native to the @click, as @click.native="func" worked for me since the underlying component does not have this event natively.

You can, also, wrap your component into a native html element which has this feature, i.e. a div.

Hope I could help!

Upvotes: 2

Related Questions