I have a problem related to Vue.js and the browser history in Firefox.
I have a simple Vue.js form to modify accounts that is embedded in a legacy laravel app. Basically, I set values in Vue.js using blade syntax like so:
<div id="vueApp"> <vue-form :customer="{{ json_encode($customer) }}"></form> </div> And use the created hook to set fields in vue (in order to be modified):
data: function() { return { firstName: null, lastName: null, //... } }, created: function() { this.firstName = this.customer.first_name; this.lastName = this.customer.last_name; //... } All those variables are shown using v-model in input markup.
The vue app is used to perform some formatting and front validations, and at the end, the form is submitted like an old html form (with a button type="submit")
Everything works fine except when I try to access to this form by clicking to the backward history button of Firefox, in that case, all the values of the input are empty. Wierdly enough, the Vue data are set like they should.
I only have this bug in Firefox (73.0.1) , I checked in Chrome and Safari.
I investigated a little, and it seem that Vue.js don't triggers any lifecycle hooks in the case you clicked go back in browser history.
Is there something I don't understand ? Or is this a bug, maybe with a workaround ?
Thanks!
mountedhook. I tried to console.log a message on every hooks, and really, none of them is triggered when I press "back". I tried to do so with an empty Vue.js component, and I have the same problem.autocomplete="off"as seen in this post stackoverflow.com/questions/52762493/… So I don't really know how to fix that because in that app we really need to don't show the autocomplete widget :/ Thanks for the help !