Vuetify v-btn click event

user_7453516 0
Viewed 37436

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

vuejs2 vuetify.js vue.js javascript
3 Answers

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!

user_112212160

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.

user_23235270
user_145275020
Related