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

Question

[Neyury]

Возникла проблема с включением лоадера перед дальнейшими долгими вычислениями (длинный цикл, загрузка данных, 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, хотя вопрос остался открытым.

Answer 1

[Александр Таратин]

methods: {
    search: function () {
        this.searching = true;
        Vue.nextTick(()=> {
              this.docs = getData(); 
              this.searching = false; 
        })
    }
},

Comments

[Neyury]

Уже пробовал, не вышло, хотя по идеи должно

Answer 2

[Alibek Issakul]

Можно обернуть в Promise getData()

methods: {
    search: function () {
        this.searching = true;
        
        getData().then(function (res) => {
             this.docs = res;
             this.searching = false;
        });
    }
},

Comments

[Александр Таратин]

Вызов через Promise не гарантирует, что успеет произойти рендер во внутреннем цикле Vue (хоть по факту это и будет работать, но все равно не надежно).
Vue.nextTick будет гарантированно работать даже если в кишках Vue что-нибудь изменят со временем.

[Neyury]

Пробовал через промис и nextTick, не вышло