綁定風格不適用快速更新到潛在價值

我有這樣的綁定風格：綁定風格不適用快速更新到潛在價值

<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

綁定風格不適用快速更新到潛在價值

回答

相關問題