Vue条件付きCSSが常にトリガーするとは限りません

Question

私はVueアプリケーションを構築しています。ページに描画するグラフに表示するのにかなり時間がかかりますので、ページにローダーを追加しました。

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

CSSプロパティI：私は以下の私は、グラフを描画する必要がある場合

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

、その後：

<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方法は次のとおりです。これは構造体でありますadd（ "test"クラス）は、単純に位置絶対値と暗い背景をローダーに追加し、グラフdivをカバーします。 問題は今、私がテストボタンでその動作をトリガーすると、グラフをカバーしていることがわかり、もう一度ボタンをクリックすると表示されますが、描画グラフ関数でlocalLoaderプロパティの値を変更すると、何も変わらない。 localLoader変数のタイミングは問題ありません（私はconsole.logです）、実際にそのコードの何が問題なのか分かりません。

EDIT： drawGraphは、この環視のおかげで呼ばれているのconst：全ての軸の変更drawGraphを呼び出し、また、最初のグラフを表示するには、最初に呼ばれていますresizeListenerを呼び出す

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

。ローダーの値はコンソールで正しいです

Answer 1

私はこの問題を解決します。問題は、グラフがあまりにも多くのデータを処理していて、レンダリングが機能しなくなったことでした。そのため、ボタンを使用してローダーをトリガーすると（グラフが処理されていない状態で）、大丈夫でした。

私が行ったことは、ローダーのZ-インデックスを変更し、グラフのレンダリング中にすべての上に置く条件付きクラスを追加することです。