Vue 조건부 CSS가 항상 트리거되지 않는 경우

Vue 애플리케이션을 만들고 페이지에 그림을 그리는 그래프가 표시되는 데 꽤 시간이 걸리기 때문에 페이지에 로더를 추가했습니다.Vue 조건부 CSS가 항상 트리거되지 않는 경우

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

CSS의 속성 I : I는 다음 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를 덮습니다. 문제는 이제 테스트 단추로 동작을 트리거하면 두 번째 시간에 단추를 클릭하면 그래프가 덮여서 다시 표시되는 것을 볼 수 있지만 draw graph 함수가 localLoader 속성의 값을 변경하게하는 경우, 아무것도 바뀌지 않습니다. localLoader 변수의 타이밍은 괜찮습니까 (나는 console.log합니다). 나는 그 코드에 무엇이 잘못된 것인지 정말로 이해할 수 없습니다.

편집 : drawGraph이 감시자 덕분이라고되어있는 CONST : 모든 축 변화 drawGraph를 호출하고 또한 최초의 그래프를 표시하기 위해 처음에라고 resizeListener 전화

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

. 로더의 값은 콘솔에서 정확합니다.

출처

2017-04-25 ste

로더 주변의 div에 대해 v-if/v-show를 사용하지 않는 이유는 무엇입니까? 기본적으로 그래프를 렌더링 할 때 v-if/v-show를 true로 표시하고 div에 테스트 클래스를 지정하면 표시되지 않습니다. –

v-if/v-else가 그래프에서 전혀 작동하지 않으면 실제 데이터가 아닌 축만 숨 깁니다. – ste

'drawGraph'를 어떻게 호출합니까? 'this.localLoader'의 값은 각 console.log에서 기대할 수있는 값입니까? – clay

나는이 문제를 해결합니다. 문제는 그래프가 너무 많은 데이터를 처리하고 렌더링이 작동을 멈췄다는 것입니다. 그래서 (그래프가 처리되지 않은 상태에서) 버튼을 사용하여 로더를 트리거하면 괜찮 았습니다.

내가 한 것은 로더의 Z- 색인을 수정하고 그래프 렌더링 중에 모든 것을 위에 놓는 조건부 클래스를 추가하는 것입니다.

출처

2017-04-26 12:44:57 ste

Vue 조건부 CSS가 항상 트리거되지 않는 경우

답변

관련 문제