@Neyury

Как обновить DOM внутри метода до его завершения?

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

Есть флаг searching, который отвечает за переключение классов. Проблема заключается в том, что классы переключаются только после завершения выполнения метода search. Проверил это убрав третью строчку, лоадер включился после получения данных, в момент их рендеринга из свойства docs.
methods: {
    search: function () {
        this.searching = true;
        this.docs = getData(); // Долгие вычисления
        this.searching = false; // (3)
    }
},


<div class="column__body" :class="[{loader: searching}, {loader_fade: searching}]">
    <doc-view v-for="doc in docs_on_opened_page" :doc="doc" :key="doc.id"></doc-view>
</div>


Как сделать так, чтобы Vue отрисовал лоадер до завершения метода? Или какие еще есть решения?

UPD:
В методе getData у меня "симулировалась" долгая загрузка с помощью подобной функции:

function sleep(ms) {
    ms += new Date().getTime();
    while (new Date() < ms) {}
}


Такой вариант тоже не работает:
methods: {
    load: function () {
        this.searching= true;
        
        this.$nextTick(function () {
            root.docs = getData();
            root.searching= false;
        })
    }
},


Я в итоге решил свою проблему просто заменив sleep на setTimeout, хотя вопрос остался открытым.
  • Вопрос задан
  • 280 просмотров
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
methods: {
    search: function () {
        this.searching = true;
        Vue.nextTick(()=> {
              this.docs = getData(); 
              this.searching = false; 
        })
    }
},
Ответ написан
@Alibek-kz
Можно обернуть в Promise getData()

methods: {
    search: function () {
        this.searching = true;
        
        getData().then(function (res) => {
             this.docs = res;
             this.searching = false;
        });
    }
},
Ответ написан
Ваш ответ на вопрос

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

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