javascript - 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(); before apply

Answer 1

您可以使用计算属性来触发基于其他属性更新的更新: https://v2.vuejs.org/v2/guide/computed.html

但我不完全理解为什么要在 applyColor 方法中循环遍历数据集的元素，以及为什么不通过为样式创建 CSS 类在 Vue 模板中循环它:

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