Ausführliche Erklärung der Fehler, die auftreten, wenn v-for Arrays beim Berechnen von Attributen in vue verarbeitet

Dieser Artikel stellt hauptsächlich ein Fehlerproblem vor, das bei der Verarbeitung von Vue-Berechnungseigenschaften und -foren auftritt. Freunde, die es benötigen, können darauf verweisen.

Problem

Fehler: Möglicherweise gibt es eine Endlosaktualisierungsschleife in einer Komponentenrenderfunktion. Endlosschleife

1. Das Array, das verarbeitet werden muss (in * * ssq **ri):

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

2. Berechnetes Attribut:

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

3.v-für 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. Als Endergebnis möchte ich die ersten 6 Zahlen im Array als rote Kugeln darstellen und die letzte (d. h. die 7.) als blaue.

Antwort

Ich habe eine Frage zu SegmentFault gestellt, Adresse: vue berechnetes Attribut berechnet betreibt gleichzeitig ein Array

Ich habe die Antwort übernommen und den Code in geändert :

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

Das Problem ist, dass ich nicht verstanden habe, dass Spleiß das ursprüngliche Array ändern wird.

Als ich nach einer Lösung suchte, brachte mir mein Freund Shaohui eine bessere Lösung bei

Das heißt, die Beurteilung des Klassennamens

1 Wenn Die Größe des Arrays ist bekannt. Treffen Sie einfach eine Beurteilung des Klassennamens, wenn der Index größer als der Index ist:

3. Code hinzugefügt:

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

Verwandte Empfehlungen:

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

v-for implementiert die Methode zum Generieren einer Tabelle und zum Hinzufügen einer Seriennummer Nummer zur Tabelle

Erklärung der vue v-for-Datenverarbeitung mit Beispielen

Einführung in den v-for-Befehl in der vue-Komponente und Analyse von Alarmproblemen bei Verwendung von v-for

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Fehler, die auftreten, wenn v-for Arrays beim Berechnen von Attributen in vue verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!