绑定风格不适用快速更新到潜在价值

我有这样的绑定风格：绑定风格不适用快速更新到潜在价值

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

来源

2016-11-30 daninthemix

，因为它是vuex状态，errors.push可能不会触发在计算财产的变化，你需要做以下，使其工作：

errors = [...errors, newError]

来源

2016-11-30 07:23:20 Saurabh

感谢您的回复，尝试过但是它和以前一样。我只得到一个错误的高度。 – daninthemix

@daninthemix你可以添加更多的代码片段，或者如果可能的话创建一个小提琴？ – Saurabh

我试过了，但我完全无法重现JSfiddle上的问题，因为一切正常，即使我在异步函数中嵌套高度更改。我很茫然。 https://jsfiddle.net/1z7dskrq/1/ – daninthemix

好，使用的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); 
    } 
}

来源

2016-11-30 11:56:05 daninthemix

绑定风格不适用快速更新到潜在价值

回答

相关问题