Detailed explanation of bugs encountered when v-for handles arrays when calculating attributes in vue

This article mainly introduces a bug problem encountered when doing vue calculation properties and v-for processing arrays. Friends who need it can refer to it. I hope it can help everyone.

Question

bug: You may have an infinite update loop in a component render function infinite loop

1. The array that needs to be processed (in * * ssq **ri):

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

2. Computed attribute computed:

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

3.v-for code:

<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. As a final result, I want to render the first 6 numbers in the array as red balls, and the last one (that is, the 7th one) as blue.

Answer

I have asked a question on SegmentFault, address: vue computed attribute computed operates an array at the same time

I have adopted the answer and changed the code to:

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

The problem is that I didn’t understand that splice would change the original array.

When looking for a solution, my friend Shaohui taught me a better solution. I am very grateful

that is, class name judgment

1. If If the size of the array is known, just make a class name judgment. Just display the blue class name if the index is greater than the index;

2. Processed html code:

<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>

3. Added code:

index>5?'blue-ball':'red-ball'

Related recommendations:

v-for implements the method of generating a table and adding a serial number to the table

Explanation of vue v-for data processing

Introduction to the v for command in the vue component and analysis of alarm problems when using v-for

The above is the detailed content of Detailed explanation of bugs encountered when v-for handles arrays when calculating attributes in vue. For more information, please follow other related articles on the PHP Chinese website!