Explication détaillée des bugs rencontrés lorsque v-for gère les tableaux lors du calcul des attributs dans vue

Cet article présente principalement un problème de bug rencontré lors de l'exécution des propriétés calculées de vue et de v-for lors du traitement des tableaux. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Problème

bug : Vous pouvez avoir une boucle de mise à jour infinie dans une fonction de rendu de composant Boucle infinie

1 Le tableau qui doit être traité. (dans * *ssq **ri) :

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

2. Attribut calculé calculé :

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

3.v-pour le 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. Comme résultat final, je souhaite rendre les 6 premiers nombres du tableau sous forme de boules rouges et le dernier (c'est-à-dire le 7ème) sous forme de bleu.

Réponse

J'ai posé une question sur SegmentFault, adresse : vue attribut calculé exploité un tableau en même temps

J'ai adopté la réponse et changé le code en :

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

Le problème est que je n'ai pas compris que l'épissure allait changer le tableau d'origine.

Lorsque je cherchais une solution, mon ami Shaohui m'a appris une meilleure façon de la résoudre Merci beaucoup

C'est-à-dire le jugement du nom de classe

1. . Si la taille du tableau est connue, faites simplement un jugement sur le nom de la classe. Affichez simplement le nom de la classe en bleu si l'index est supérieur à l'index

2.

<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. Code ajouté :

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

Recommandations associées :

v-for implémente la méthode de génération d'une table et d'ajout un numéro de série à la table

Explication du traitement des données vue v-for avec des exemples

Introduction à la commande v for dans le composant vue et analyse des problèmes d'alarme lors de l'utilisation de v-for

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!