bound event with once gets reused in v-if/else condition

[ghost]

Version

2.5.16

Reproduction link

https://codepen.io/katedo17/pen/rdXMbp

Steps to reproduce

Enter "3" in the input field, and click the link "Test Btn 2".

What is expected?

It should only trigger the on click event that was configured for the "Test Btn 2".

What is actually happening?

It triggers the function binded to "Test Btn 1" and then trigger the "Test Btn 2".

---

This only happens when I use v-if in the parent element of the link. But if I use v-show, it doesn't have the issue.

[posva]

As a note, you should not use both, v-on and onclick (Vue cannot detect the later)
You can workaround this by adding a key to one or both of the a elements

[ghost]

Noted. The onclick attribute is just to test the issue. My use case is, the link with v-on:click.once is supposed to call to the server, while the other one supposed to redirect to another page with no JS involved. But I was having an issue because when I click the link to redirect, it is actually doing a call to the server.

Thanks for the help. It works by adding "key" attribute.

[javoski]

If you want to prevent the default action of an event, please use .prevent modifier.

[gebilaoxiong]

It seems that once listener was not properly destroyed

[cobain46]

I'm not a English native speaker, I'll do my best to describe it. The reason for this problem is element reuse,
The existing elements are usually reused for the efficiency of rendering. So if you want make the function like you want , you need to add a key to the 'input'. key must be unique value.