Vue: Weird behavior with browser back button

[acoshift]

Version

2.5.16

Reproduction link

https://jsfiddle.net/t1gw7hdL/

Steps to reproduce

1. Click "Other Page"
2. Click Back button on Browser

What is expected?

Checkbox should check like before redirect

What is actually happening?

Checkbox show wrong checked

---

Chrome 66.0.3359.139, After step 2, can repeat all steps again, all checks disappear

[yaodingyd]

This is nothing with Vue. Here is a link that reproduces this issue in vanilla JS. https://jsfiddle.net/q9kLzkxb/6/

Basically this is a browser feature: pressing the "back" button will restore the final state of checkboxes. Also any DOM modifications done via javascript will be ignored.

For your scenario, this is what I speculate what browser does: when go to link, browser takes a snapshot of what the final state: there are only 4 checkboxes which are not modified by JavaScript and the second and third are checked. Then you go back, browser tries to restore the state on initial load: the second and third checkbox are checked. Then vue kicks in, and the second checkbox gets unchecked.

To solve this is simple: Avoid DOM template.

[posva]

Thanks for taking the time to look at it @yaodingyd