How to process arrays through v-for in vue

This article mainly introduces a bug problem encountered when doing vue calculated properties and v-for when processing arrays. Friends in need can refer to it

Question

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

1. Array to be processed (in ** ssq **):

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. Final result I want to render the first 6 numbers in the array into red balls, and the last one (that is, the 7th one) is rendered 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 I was looking for a solution, my friend Shaohui taught me a better solution. I am very grateful

that is, class name judgment

1. If the size of the array is known, make a class name judgment and 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?&#39;blue-ball&#39;:&#39;red-ball&#39;]" >{{ item }}</em>

3. Added code:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About how to use datepicker in vue2.0

JavaScript mediator mode (detailed tutorial)

How to use Dom elements in jQuery?

How to solve the problem of niceScroll scroll bar misalignment in jQuery

Detailed introduction to the knowledge points about promises in js

How to delete an element in a JS array

How to implement mysql transaction automatic recycling connection in Node.js

Using Nginx in vue.js to solve cross-domain issues

The above is the detailed content of How to process arrays through v-for in vue. For more information, please follow other related articles on the PHP Chinese website!