При возврате браузера на страницу потеря связи с формой Vue.js

Question

Вот что я делаю: у меня есть компонент набора форм, который извлекает данные через ajax для заполнения набора форм.Пользователь может изменить эти данные из формы и отправить.

Проблема: это работает хорошо.Тем не менее, я заметил, что если я перехожу на другую страницу и затем нажимаю кнопку «вернуться на одну страницу» в браузере, форма там (DOM в шаблоне), но пустая.Больше нет данных, связанных с полями ввода v-модели ...

Большинство сообщений об этом поведении связаны с vue-router, которым я не пользуюсь.

Я думаю, что это может иметьиметь дело с хуками жизненного цикла ... На самом деле, на моем компоненте я получаю данные, когда "смонтирован".Но если да, то какой жизненный цикл?

Я также безуспешно пытался «поддерживать жизнь».

Я поместил подробный журнал в свой компонент, чтобы попытаться перехватить ловушку жизненного цикла при возврате браузераи ни один из них не напечатан ...

beforeCreate: function() {
    console.log('---- BEFORE CREATE ----> ')
},
created: function() {
    console.log('---- CREATED ----> ')
    this.getModelObjects();
},
beforeMount: function() {
    console.log('---- BEFORE MOUNT ----> ')
},
mounted: function() {
    console.log('---- MOUNTED ---->')
    this.getModelObjects();
},
beforeUpdate: function() {
    console.log('---- BEFORE update ----> ')
},
updated: function() {
    console.log('---- UPDATED ----> ')
},
beforeDestroy: function() {
    console.log('---- BEFORE DESTROY ----> ')
},
destroyed: function() {
    console.log('----  DESTROYED ----> ')
},

Есть идеи?

Answer 1

ОК, я решил эту проблему самым простым способом!

На самом деле, использование localStorage (https://fr.vuejs.org/v2/cookbook/client-side-storage.html), не решило бы проблему.

В любом случае,он должен быть привязан к хуку жизненного цикла, чтобы его можно было запустить. Поэтому, поскольку я уже синхронизировал эти данные в серверной базе данных с Axios, это добавило бы избыточную сложность и привело бы к той же проблеме.

Iтакже заметил, что только поля v-модели там, где это касалось. {{var}} не было. Итак, я подумал, что это действительно связано с формами.

Вместо этого я использовал autocomplete="on" в своемформ.

<form method="post" autocomplete="on">
.....
</form>

Но на самом деле автозаполнение по умолчанию включено:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Функция сохранения включенапо умолчанию. Установка значения атрибута autocomplete в off отключает эту функцию.

Я не помню почему, но я использовал autocomplete="off" в моих формах :-( ... Это может бытьпочему я не вижу много сообщений об этом ...

Теперь, если пользователь нажимает ссылку на страницеe, а затем перейдите назад с помощью кнопки «перейти на одну страницу назад», там есть поля, привязанные к v-модели.