VueJS, как отложить метод для выполнения после рендера?

Question

У меня есть кнопка, которая выполняет метод синтаксического анализа

parse: function()
{
    this.json.data = getDataFromAPI();
    applyColor();
},
applyColor: function()
{
    for (var i=0; i<this.json.data.length; i++)
    {
        var doc = document.getElementById(this.json.data[i].id);
        doc.style.background = "red";
    }
}

Проблема в том, что applyColor не может выполняться должным образом, потому что this.json.data не отображается, пока не завершится функция parse().

Я быхочу достичь чего-то вроде этого:

this.json.data = getDataFromAPI(); 
exit parse() method
execute applyColor();

но без огромных изменений в коде -> возможно, что-то вроде "отложите это на потом", как

this.json.data = getDataFromAPI(); 
promise(500ms) applyColor();
exit parse() method
500ms
executes applyColor()

Кем я былпытаешься?

this. $ forceUpdate ();перед применением

Answer 1

вам нужно что-то вроде этого

getDataFromAPI должен быть обещан, когда приходят данные, вы отправляете переменную 'this' в качестве ссылки, используя self.

parse: function()
{
    var self = this;
    getDataFromAPI().then((data)=>{
     self.json.data = data
     self.applyColor();
    })

},
applyColor: function()
{
    for (var i=0; i<this.json.data.length; i++)
    {
        var doc = document.getElementById(this.json.data[i].id);
        doc.style.background = "red";
    }
}

Answer 2

Async и await, похоже, будут работать с наименьшими изменениями кода.Вам нужно определить синтаксический анализ с async и this.json.data = await getDataFromApi(), делая это таким образом, код будет выполняться в том порядке, в котором он указан в описании, поэтому applyColors будет иметь this.json.data.Ссылка: https://javascript.info/async-await

Answer 3

Вы можете использовать вычисленные свойства для запуска обновления, основанного на обновлении других свойств: https://vuejs.org/v2/guide/computed.html

Но я не до конца понимаю, почему вы перебираете элементы набора данных в методе applyColorи почему вы не зацикливаете его в шаблоне Vue, создав класс CSS для стиля, подобного следующему:

<div v-for="element, index in json.data" :key="index" class="bg-red">{{element}}</div>