Vue: Element is replaced when surrounded with v-if

[donnysim]

Version

2.3.4

Reproduction link

https://jsfiddle.net/L5sjqyrg/

Steps to reproduce

On first click an alert is shown, now click "Show" button, it changes a variable and the view is re-rendered - the input has nothing to do with it, click on the input, nothing happens.

This only happens when there's v-if above and below the element, if you remove one v-if everything works as intended.

What is expected?

Alert is shown every time the input is clicked.

What is actually happening?

After clicking Show, alert is not thrown after clicking on input.

---

This breaks js plugins like Pikaday because it replaces the input element with new one.

[LinusBorg]

This is expected behaviour. It's because the input is recreated in this specific situation due to the way vdom diffing works here.

You can make Vue better aware about specific elements with a key:

https://jsfiddle.net/Linusborg/L5sjqyrg/1/

[donnysim]

I tried adding it on the input and it didn't work, but it was in a nested div. It appears the key attribute needs to be at the same level as the v-if's otherwise it will still be replaced. This probably should be documented 🤔 feel stupid not trying it 😄