0

我有这种绑定样式：

<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);并不是一个真正令人满意的解决方案。

4

2 回答 2

0

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

errors = [...errors, newError]
于 2016-11-30T07:23:20.740 回答
0

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

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);
    }
}
于 2016-11-30T11:56:05.430 回答