@Sector567

Как решить проблему возникающую при ctrl + f5 во vue.js?

Вылетает такая ошибка если обновить страницу при помощи ctrl + f5:
Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of null"

Из-за чего это происходит и как бороться?

ОПИСАНИЕ:
В хуке mounted(){...} идет обращение к экшену в vuex.
В экшене происходит следующее
в data хранятся объект со значениями классов-селекторов, который взят из localestorage
set_favourites_movies(state, data) {
            state.favouritesMovies = data;
            let arr = [];
            for (let key in data) {
                arr.push(data[key]);
            }
            for (let key of arr) {
                document.querySelector(key).style.color= "red";
            }
        },

То есть берется объект со значениями (значения - это классы-селекторы) из localestorage, потом значения из этого объекта записываются в массив, далее этот массив перебирается и к каждому селектору при помощи document.querySelector меняется color.

Таким образом, когда обновляешь страницу, то цвет динамически задается тем классам, которые есть в localeStorage.

Проблема в том, что если просто обновить страницу при помощи f5, то все работает, а когда обновляешь при помощи
ctrl + f5 в консоле вылетает следующая ошибка:
Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of null"
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
@londhor
Учитывая предыдущие комменты — работай с промисами.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kttotto
все, что .NET
Видимо, в localstorage селекторы попадают позже, чем их читает document.querySelector(key). При простом F5 в storage эти значения все еще есть, поэтому нормально читает. При ctrl+F5 storage очищается и при первом обращении там ничего нет, пока не отработает что-то, что заполняет его.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы