Question

我有这种约束风格：

<div :style="{height: errHeight}"

从这个计算属性：

errHeight() { return Math.ceil(this.errors.length * 20 + 7) + 'px'; }

this.errors引用此计算属性，来自Vuex：

errors() { return this.$store.state.errors; },

使用array.push将错误添加到数组中。添加或删除一个错误时，样式绑定工作正常，但在初始页面加载时，由于不同的异步任务失败（http请求），可能会快速连续添加两个或更多错误，在这种情况下，我的errHeight（）计算属性只要返回1错误的高度。

修改

如果我将高度计算移动到具有延迟的观察者，它确实有效，只要延迟比影响高度的异步函数长。 setTimeout(this.calcHeight, 1000);并非真正令人满意的解决方案。

Answer 1

因为它是vuex状态，errors.push可能不会触发计算属性的更改，您需要执行以下操作才能使其工作：

errors = [...errors, newError]

Answer 2

好吧，使用setTimeout（）来约束新错误写入的速度似乎有效。因为在我的CSS中，高度转换需要500毫秒，我不认为在500毫秒启动之前再次修改高度。所以我需要这段代码来确保数组在500ms内不会改变两次：

error(context, error) {
    var d = context.state.lastError;
    if (d === null || d < (Date.now() - 500)) {
        context.commit('error', error);
    } else {
        setTimeout(function() {
            context.commit('error', error);
        }, 500);
    }
}

绑定样式不对基础值应用快速更新

2 个答案: