@click on <n-button> component

[vovek]

Hello.
I'm trying to handle click event on n-button component and it does not seem to work.
I have such component
<n-button round="" @click.prevent="stopSubscription">Stop</n-button>
and such method

stopSubscription () {
  console.log('stopSubcription')
}

When I click the button nothing happens.

If i replace the component with simple bootstrap button everything works fine
<div class="btn btn-round" @click.prevent="stopSubscription">Stop</div>

Could you please help me and explain what I'm doing wrong?

[cristijora]

Hi @vovek Thanks for using our products and for the question.
This is a common Vue related question and you can easily fix it with @click.native modifier https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

.native modifier is used on components directly

If you are bother by this and don't want to use .native modifier you could add this inside the n-button component

 <button @click="handleClick"

methods: {
  handleClick(evt){
   this.$emit('click', evt);
  }
}

With this custom event passed you don't need to add .native modifier

[vovek]

Thanks a lot!

[maiwenn34]

Thanks a lot too !