Javascript Vue条件css并不总是触发

我正在构建一个Vue应用程序，在一个页面中添加了一个加载程序，因为我在页面中绘制的图形需要很长时间才能显示。结构如下：

<template>
    <div>
        <button @click="changeLocalLoader">test</button>
        <div style="" :class="{test : localLoader}">
            <loader></loader>
        </div>
        <div ref="distribution" class="distribution-plot"></div>
    </div>
</template>

然后，当我必须绘制图形时，我会执行以下操作：

        const drawGraph = function drawGraph(d) {
            this.changeLocalLoader();
            // building the graph
            ....
            // finishing building the graph
            this.changeLocalLoader();
        }

我添加的css属性（“test”类）只是将position absolute和暗背景添加到加载程序中，从而覆盖了graph div。 现在的问题是，如果我用test按钮触发该行为，如果我再次单击按钮，我可以看到图形被覆盖并再次显示，但是如果我让draw graph函数更改localLoader属性的值，则不会发生任何更改。 localLoader变量的计时是正常的（I console.log），我不能真正理解代码的错误

编辑： const drawGraph之所以被命名，是因为这位观察者：

xKey() {
    this.resizeListener();
},

---

调用resizeListener，每次轴发生变化时调用drawGraph，在开始时也会调用它以显示第一个图形。控制台中加载器的值正确

我解决了问题。问题是图形处理的数据太多，渲染刚刚停止工作。这就是为什么当我用按钮触发加载器时（没有图形被处理），它是正常的

---

我所做的是添加一个条件类来修改加载程序的z索引，并在图形渲染期间将其置于一切之上。

我解决了这个问题。问题是图形处理的数据太多，渲染刚刚停止工作。这就是为什么当我用按钮触发加载器时（没有图形被处理），它是正常的

---

我所做的是添加一个条件类来修改加载程序的z索引，并在图形渲染期间将其置于一切之上。

为什么不对加载程序周围的div使用v-if/v-show？默认情况下不显示它，当呈现图形时，将v-if/v-show设置为true并为div提供其测试类。v-if/v-else对图形根本不起作用，它仅隐藏轴而不隐藏实际数据。如何调用

drawGraph

？

this.localLoader

的值是否与您在每个控制台.log上所期望的值相同？为什么不对加载程序周围的div使用v-if/v-show呢？默认情况下不显示它，当呈现图形时，将v-if/v-show设置为true并为div提供其测试类。v-if/v-else对图形根本不起作用，它仅隐藏轴而不隐藏实际数据。如何调用

drawGraph

？

this.localLoader

的值是否与您在每个console.log中期望的值相同？

xKey() {
    this.resizeListener();
},