Vue: Über den Fehler des nativen Werts des Kontrollkästchens?
Hallo.
Ich habe ein sehr seltsames Problem mit Kontrollkästchen festgestellt.
<template lang="html">
<div>
<div v-for="(item,key) in test">
<input type="checkbox" v-model="item.active">
</div>
</div>
</template>
<script>
window.T = [{
active: false
}, {
active: false
}];
export default {
data() {
return {
test: T
}
},
methods: {}
}
</script>
Zuerst habe ich T[0].active=true in die Konsole eingegeben, und das erste Kontrollkästchen wurde normal aktiviert. Als ich den Browser aktualisiert habe, habe ich das erste Kontrollkästchen manuell aktiviert und dann T[0].active=false eingegeben. Das erste Kontrollkästchen wird nicht deaktiviert, das zweite kann jedoch über die Konsole normal (wahr / falsch) eingestellt werden.
Versucht 2.1.0 und 2.1.8, die Ergebnisse sind die gleichen, die Chrome-Version ist 54.0.2824.2
moersing
Alle 7 Kommentare
Um statusbehaftete dom-Elemente (Eingabe usw.) mit v-for zu rendern, müssen Sie das Schlüsselattribut hinzufügen, um sicherzustellen, dass der Status korrekt ist.
https://cn.vuejs.org/v2/guide/list.html#key
Dieser Standardmodus ist gültig, gilt jedoch nur für Listenrendering-Ausgaben, die nicht vom Status der Unterkomponente oder vom temporären DOM-Status abhängen (z. B. Formulareingabewerte).
fnlctrl
am 11. Jan. 2017
@fnlctrl Vielen Dank für Ihre Antwort, aber vielleicht habe ich sie nicht klar beschrieben. Ich habe den Schlüssel wie gesagt hinzugefügt, und das Ergebnis ist das gleiche. Es gibt einen weiteren Beweis dafür, dass das, was ich gesagt habe, das in Chrom 55.0.2883.95 unter Mac ist. Unabhängig davon, ob der Schlüssel hinzugefügt wurde oder nicht, kann er normal eingestellt werden.
moersing
am 11. Jan. 2017
Kann nicht reproduzieren. https://jsfiddle.net/1b7cux60/
fnlctrl
am 11. Jan. 2017
@fnlctrl Klicken Sie vor 3 Sekunden auf den ersten, um den ausgewählten Status
https://jsfiddle.net/1b7cux60/5/
moersing
am 11. Jan. 2017
Testen Sie es weiter, es gibt tatsächlich ein Problem
https://jsfiddle.net/Lu3o86wt/
Der Kontrollkästchenstatus des letzten Klicks ist falsch
Das zuletzt angeklickte <input> bleibt im falschen Zustand
Chrom
Kante
fnlctrl
am 11. Jan. 2017
@fnlctrl Dies ist eigentlich kein Fehler. Es passiert, weil das Kontrollkästchen immer noch fokussiert ist. Wir aktualisieren es nicht absichtlich. Zumindest ist es für Texteingaben sinnvoll, wir möchten möglicherweise andere Eingaben überdenken
posva
am 11. Jan. 2017
Dies wurde über # 4639 behoben
yyx990803
am 11. Jan. 2017
Verwandte Themen
gkiely
·
3Kommentare
loki0609
·
3Kommentare
seemsindie
·
3Kommentare
finico
·
3Kommentare
guan6
·
3Kommentare
Hilfreichster Kommentar
Dies wurde über # 4639 behoben