vue で属性を計算するときに v-for が配列を処理するときに発生するバグの詳細な説明

この記事は、vue 計算プロパティと v-for を実行する際に発生するバグの問題を主に紹介します。必要な方は参考にしていただければ幸いです。

問題

バグ: コンポーネントのレンダリング関数の無限ループに無限ループがある可能性があります

1. 処理される配列 (** ssq ** 内):

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

2. 計算された属性:

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3.v-コード:

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4. 最終結果は、配列内の最初の 6 つの数値を赤いボールとしてレンダリングし、最後の数値 (つまり 7 番目の数値) を次のようにレンダリングします。青。

回答

私はSegmentFaultで質問をしました、アドレス：vueの計算された属性の計算は同時に配列を操作します

私は回答を受け入れ、コードを次のように変更しました：

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

問題は、そうでないことですスプライスが元の配列にどのような影響を与えるかを理解する 違いを生む。

解決策を探していたところ、友人のShaohuiさんがより良い解決策を教えてくれました

つまり、クラス名判定です

1. 配列のサイズがわかっている場合は、クラス名判定を行います。インデックスはできるだけ青色のクラス名を表示します。

2. 処理された HTML コード:

<em v-for="(item, index) in ssq.bonus_code" :class="[&#39;tac&#39;,&#39;mr5&#39;,&#39;fl&#39;,index>5?'blue-ball':'red-ball']" >{{ item }}</em>

関連する推奨事項:

v-for はテーブルを生成します。シリアル番号メソッドを追加します

vue v-for データ処理を説明する例

vue コンポーネントの v for コマンドの紹介と、v-for 使用時のアラーム問題の分析

以上がvue で属性を計算するときに v-for が配列を処理するときに発生するバグの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。