0

私はこのバインドされたスタイルを持っています:

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

この計算されたプロパティから:

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

this.errorsVuex から、この計算されたプロパティを参照します。

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

エラーは、 を使用して配列に追加されarray.pushます。1 つのエラーが追加または削除された場合、スタイル バインディングは正常に機能しますが、最初のページの読み込み時に、異なる非同期タスクの失敗 (http 要求) によって 2 つ以上のエラーが立て続けに追加される可能性があります。その場合、私の errHeight() 計算プロパティ1 エラーの高さのみを返します。

編集：

高さの計算を遅延のあるウォッチャーに移動すると、遅延が高さに影響を与える非同期関数よりも長い限り、機能します。setTimeout(this.calcHeight, 1000);本当に満足のいく解決策ではありません。

4

2 に答える 2

0

さて、 setTimeout() を使用して、新しいエラーが書き込まれる速度を制限することはうまくいくようです。私の CSS では、高さの遷移に 500 ミリ秒かかるため、その 500 ミリ秒が機能する前に高さを再度変更することはないと思います。したがって、配列が 500 ミリ秒以内に 2 回変更されないようにするには、次のコードが必要です。

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 に答える
0

vuex状態であるerrors.pushため、計算されたプロパティの変更をトリガーしていない可能性があります。機能させるには、次のことを行う必要があります。

errors = [...errors, newError]
于 2016-11-30T07:23:20.740 に答える