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

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

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

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

Answer 2

您需要类似

getDataFromAPI应该是可以保证的，当数据到来时，您使用self将“ this”变量作为引用发送。

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 3

异步和等待似乎可以在最少的代码更改下工作。您需要使用async和public static InputStream encodeToJpg(String filepath) throws IOException { System.out.println("Encoding to JPG..."); BufferedImage buffImg; InputStream origStream = new FileInputStream(new File(filepath)); buffImg = ImageIO.read(origStream); origStream.close(); // Recreate the BufferedImage to fix channel issues BufferedImage newBuffImg = new BufferedImage(buffImg.getWidth(), buffImg.getHeight(), BufferedImage.TYPE_INT_RGB); newBuffImg.createGraphics().drawImage(buffImg, 0, 0, Color.WHITE, null); buffImg.flush(); ByteArrayOutputStream outStream = new ByteArrayOutputStream(); ImageIO.write(newBuffImg, "jpg", outStream); ByteArrayInputStream inStream = new ByteArrayInputStream(outStream.toByteArray()); return inStream; }定义解析，以这种方式执行，代码将按照描述时的确切顺序执行，因此applyColors将具有this.json.data。参考：https://javascript.info/async-await

VueJS如何延迟渲染后执行的方法？

3 个答案: