Vue 条件 css 并不总是触发

Posted 2023-02-22

【中文标题】Vue 条件 css 并不总是触发

【英文标题】：Vue conditional css does not always trigger

【发布时间】：2017-09-22 01:27:15

【问题描述】：

我正在构建一个 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>

这是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();
,

调用 resizeListener 调用 drawGraph 每个轴发生变化，并且在开始时也调用它以显示第一个图形。 loader 的值在控制台中是正确的

【问题讨论】：

为什么不对加载器周围的 div 使用 v-if/v-show 呢？默认情况下不显示它，在渲染图形时将 v-if/v-show 设置为 true 并给 div 其测试类。

v-if/v-else 对图表根本不起作用，它只隐藏轴而不是实际数据。

你怎么称呼drawGraph？ this.localLoader 的值是您对每个 console.log 的期望值吗？

【参考方案1】：

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

我所做的是添加一个条件类来修改加载器的 z-index 并在图形渲染期间将其放在所有内容之上。