Vue: <select>lié au tableau ne fonctionne pas correctement après splice ()</select>

Créé le 30 sept. 2016 · 6Commentaires · Source: vuejs/vue

Considérez le code suivant:

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

Dans <select> , chaque valeur d'option est liée à $index . Si nous exécutons splice() sur options , comme, options.splice(0,1) , $index ne se synchronise pas correctement avec les options.

Par exemple, laissez options=['a','b'] et le HTML rendu ressemble (mais pas vraiment):

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

Après options.splice(0,1) , puis options=['b'] , mais le HTML rendu devient:

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

La valeur de l'option 'b' ne devient pas 1, qui devrait être 0 à cause de $index . Ce n'est peut-être pas un bogue, mais c'est assez étrange.

Vous trouverez ci-dessous la démo en direct de ce numéro:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

Source

peteranny

Commentaire le plus utile

Testé sur 2.0 et cela a fonctionné comme prévu: https://jsfiddle.net/dycmgzcm/
Je marque donc cela comme un bogue de 1.x

fnlctrl le 2 oct. 2016

👍2

Tous les 6 commentaires

Ajoutez simplement un attribut sélectionné dans votre modèle selected="{{$index == selected}}"

Je mets à jour la démo ici https://jsfiddle.net/trwp98g9/5/

defcc le 1 oct. 2016

👍1

@peteranny Pouvez-vous clarifier quel était le comportement attendu?

Après options.splice (0,1), alors options = ['b'], mais le HTML rendu devient:
<option value="1">b</option>

Je n'obtiens pas le même résultat que vous avez fourni d'ici:
Avant de cliquer sur supprimer:
before

Après avoir cliqué:
after

La valeur de l'option 'b' ne devient pas 1, qui devrait être 0 à cause de $ index

Alors, que devrait-il devenir exactement? La valeur de «b» était 1 avant le clic et est devenue 0 après le clic.

fnlctrl le 1 oct. 2016

@fnlctrl Um, merci pour vos tests. Je pense avoir posé la mauvaise question.
Selon vos tests, la valeur de «b» est devenue 0 après le clic.

Ma vraie question est la suivante: maintenant que la valeur de «b» était 0, pourquoi <select> n'a-t-il pas sélectionné «b» de toute façon?
Comme le montre votre image, <select> n'a sélectionné aucune option du tout, tandis que <select> devrait sélectionner l'option avec la valeur 0.
(Et c'est pourquoi j'ai mal deviné que la valeur de 'b' n'a pas changé.)

peteranny le 2 oct. 2016

@peteranny C'est peut-être un bogue car selected est resté 0 tandis que le options changé, et le dom est censé refléter ce changement, mais je ne suis pas sûr ..

Pour l'instant, vous pouvez essayer d'ajouter selected prop comme @defcc suggéré, (notez que la liaison moustache pour les props / attrs est obsolète dans la version 2.0, veuillez donc utiliser :selected="$index == selected" place)
Ou vous pouvez ajouter un track-by prop à <options> , ce qui a probablement fait penser à vue qu'il est sûr de mettre à jour la valeur sélectionnée dans dom. https://jsfiddle.net/74ncq90w/

fnlctrl le 2 oct. 2016

👍2

Testé sur 2.0 et cela a fonctionné comme prévu: https://jsfiddle.net/dycmgzcm/
Je marque donc cela comme un bogue de 1.x

fnlctrl le 2 oct. 2016

👍2

La fermeture des problèmes 1.x en tant que 1.x est désormais en fin de vie et ne recevra que les correctifs de sécurité critiques.