Vue有条件的css并不总是触发

我正在构建Vue应用程序，并且在页面中添加了一个加载器，因为我在页面中绘制的图形需要很长时间才能显示。这是结构：Vue有条件的css并不总是触发

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

这是changeLocalLoader方法：

methods: { 
    changeLocalLoader() { 
     this.localLoader = !this.localLoader; 
    }, 
},

然后，当我不得不绘制图形我做到以下几点：

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

CSS属性我添加（“测试”类）只需将位置绝对和黑色背景添加到加载器，从而覆盖图形div。现在的问题是，如果我用测试按钮触发该行为，我可以看到图形被覆盖并再次显示，如果再次点击按钮，但如果我让绘制图形函数更改localLoader属性的值，没变化。 localLoader变量的时间是好的（我console.log他们），我真的不明白该代码有什么问题。

编辑： const的drawGraph是被称为感谢这个守望者：

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

调用调用drawGraph每轴变化，它也被称为在一开始就显示第一张图resizeListener。加载程序的值在控制台中是正确的

来源

2017-04-25 ste

为什么不使用v-if/v-show来显示加载器的div？默认情况下，不显示它，当渲染图集v-if/v-show为true时，并为div提供它的测试类。 –

v-if/v-else根本不起作用，它只隐藏坐标轴而不隐藏实际数据。 – ste

你怎么称'drawGraph'？每个console.log文件中'this.localLoader'的值是什么？ – clay

我解决了这个问题。问题在于该图处理的数据过多，渲染器停止工作。这就是为什么当我用按钮触发装载器（没有图形正在处理）的时候，这是可以的。

我所做的是添加一个条件类，该条件类修改加载器的z-index，并在图形呈现期间将其放在一切之上。

来源

2017-04-26 12:44:57 ste

Vue有条件的css并不总是触发

回答

相关问题