Связанный стиль не применяя быстрые обновления к базовой стоимости

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 ошибки.

EDIT:

Если я перееду расчет высоты в сторожа с задержкой, он делает работу, так долго, как задержка больше, чем функции асинхронными, влияющие на высоту. setTimeout(this.calcHeight, 1000); не совсем удовлетворительное решение.

Answer 1

как это vuex состояние, errors.push не может быть запуская изменения в вычисленной собственности, Вам нужно сделать следующее, чтобы сделать его работу:

errors = [...errors, newError] 

Answer 2

Ну, используя 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); 
    } 
}