Vue: <select>gebunden mit Array führt nach splice () falsch aus</select>

Erstellt am 30. Sept. 2016 · 6Kommentare · Quelle: vuejs/vue

Betrachten Sie den folgenden Code:

<div id="demo">
  <select v-model="selected" number>
    <option v-for="opt in options" :value="$index" number>{{opt}}</option>
  </select>
</div>

In <select> ist jeder Optionswert an $index gebunden. Wenn wir splice() für options ausführen, z. B. options.splice(0,1) , wird $index nicht korrekt mit Optionen synchronisiert.

Lassen Sie zum Beispiel options=['a','b'] und das gerenderte HTML sieht aus (aber nicht wirklich):

<div id="demo">
  <select selectedIndex="0">
    <option value="0">a</option>
    <option value="1">b</option>
  </select>
</div>

Nach options.splice(0,1) , dann options=['b'] , aber der gerenderte HTML-Code wird:

<div id="demo">
  <select selectedIndex="0">
    <option value="1">b</option>
  </select>
</div>

Der Wert der Option 'b' wird nicht zu 1, was aufgrund von $index 0 sein sollte. Dies ist vielleicht kein Fehler, aber das ist irgendwie seltsam.

Unten finden Sie die Live-Demo dieser Ausgabe:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

Quelle

peteranny

Hilfreichster Kommentar

Getestet auf 2.0 und es hat wie erwartet funktioniert: https://jsfiddle.net/dycmgzcm/
Ich markiere dies als Fehler von 1.x.

fnlctrl am 2. Okt. 2016

👍2

Alle 6 Kommentare

Fügen Sie einfach ein ausgewähltes Attribut in Ihre Vorlage ein selected="{{$index == selected}}"

Ich aktualisiere die Demo hier https://jsfiddle.net/trwp98g9/5/

defcc am 1. Okt. 2016

👍1

@ Peteranny Kannst du klarstellen, was das erwartete Verhalten war?

Nach options.splice (0,1) ist options = ['b'], aber der gerenderte HTML-Code wird zu:
<option value="1">b</option>

Ich erhalte nicht das gleiche Ergebnis wie Sie hier angegeben haben:
Bevor Sie auf Entfernen klicken:
before

Nach dem Klicken:
after

Der Wert der Option 'b' wird nicht zu 1, was aufgrund des $ index 0 sein sollte

Was genau soll es werden? Der Wert von 'b' war 1 vor dem Klicken und wurde 0 nach dem Klicken.

fnlctrl am 1. Okt. 2016

@fnlctrl Ähm , danke für deine Tests. Ich glaube, ich habe die falsche Frage gestellt.
Gemäß Ihren Tests wurde der Wert von 'b' nach dem Klicken 0.

Meine wahre Frage ist: Nun, da der Wert von 'b' 0 war, warum hat <select> nicht 'b' ausgewählt?
Wie in Ihrem Bild zu sehen ist, hat <select> überhaupt keine Option ausgewählt, während <select> die Option mit dem Wert 0 auswählen sollte.
(Und deshalb habe ich falsch gedacht, dass sich der Wert von 'b' nicht geändert hat.)

peteranny am 2. Okt. 2016

@peteranny Es kann ein Fehler sein, weil selected 0 geblieben ist, während sich options geändert hat und der Dom diese Änderung widerspiegeln soll, aber ich bin mir nicht sicher.

Im Moment können Sie versuchen, selected prop hinzuzufügen , wie von :selected="$index == selected" ).
Oder Sie können <options> eine track-by Requisite hinzufügen, was vue wahrscheinlich zu der Annahme veranlasst hat, dass es sicher ist, den ausgewählten Wert in dom zu aktualisieren. https://jsfiddle.net/74ncq90w/

fnlctrl am 2. Okt. 2016

👍2

Getestet auf 2.0 und es hat wie erwartet funktioniert: https://jsfiddle.net/dycmgzcm/
Ich markiere dies als Fehler von 1.x.

fnlctrl am 2. Okt. 2016

👍2

Das Schließen von 1.x-Problemen als 1.x ist nun beendet und erhält nur noch kritische Sicherheitspatches.

yyx990803 am 17. Apr. 2018

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Vue: <select>gebunden mit Array führt nach splice () falsch aus</select>

Hilfreichster Kommentar

Alle 6 Kommentare

Verwandte Themen