Vue: <select>enlazado con la matriz funciona incorrectamente después del empalme ()</select>

Creado en 30 sept. 2016 · 6Comentarios · Fuente: vuejs/vue

Considere el siguiente código:

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

En <select> , el valor de cada opción está vinculado con $index . Si realizamos splice() en options , como options.splice(0,1) , $index no se sincroniza correctamente con las opciones.

Por ejemplo, dejemos que options=['a','b'] y el HTML renderizado se vea como (pero no realmente):

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

Después de options.splice(0,1) , luego options=['b'] , pero el HTML renderizado se convierte en:

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

El valor de la opción 'b' no se convierte en 1, que debería ser 0 debido a $index . Puede que esto no sea un error, pero es un poco extraño.

A continuación se muestra la demostración en vivo de este problema:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

Fuente

peteranny

Comentario más útil

Probado en 2.0 y funcionó como se esperaba: https://jsfiddle.net/dycmgzcm/
Así que estoy marcando esto como un error de 1.x

fnlctrl en 2 oct. 2016

👍2

Todos 6 comentarios

Simplemente agregue un atributo seleccionado en su plantilla selected="{{$index == selected}}"

Actualizo la demostración aquí https://jsfiddle.net/trwp98g9/5/

defcc en 1 oct. 2016

👍1

@peteranny ¿Puedes aclarar cuál fue el comportamiento esperado?

Después de options.splice (0,1), entonces options = ['b'], pero el HTML renderizado se convierte en:
<option value="1">b</option>

No obtengo el mismo resultado que el que proporcionó desde aquí:
Antes de hacer clic en eliminar:
before

Después de hacer clic:
after

El valor de la opción 'b' no se convierte en 1, que debería ser 0 debido a $ index

Entonces, ¿en qué debería convertirse exactamente? El valor de 'b' era 1 antes de hacer clic y se convirtió en 0 después de hacer clic.

fnlctrl en 1 oct. 2016

@fnlctrl Um, gracias por su prueba. Creo que hice la pregunta incorrecta.
Según sus pruebas, el valor de 'b' se convirtió en 0 después de hacer clic.

Mi verdadera pregunta es: ahora que el valor de 'b' era 0, ¿por qué <select> no seleccionó 'b' de todos modos?
Como se ve en su imagen, <select> no seleccionó ninguna opción, mientras que <select> debe seleccionar la opción con el valor 0.
(Y es por eso que supuse que el valor de 'b' no cambió).

peteranny en 2 oct. 2016

@peteranny Puede ser un error porque selected permaneció 0 mientras que options cambió, y se supone que el dom debe reflejar este cambio, pero no estoy seguro.

Por ahora, puede intentar agregar selected prop como sugirió @defcc , (tenga en cuenta que el enlace de bigote para props / attrs está obsoleto en 2.0, así que use :selected="$index == selected" lugar)
O puede agregar un track-by prop a <options> , lo que probablemente hizo que vue pensara que es seguro actualizar el valor seleccionado en dom. https://jsfiddle.net/74ncq90w/

fnlctrl en 2 oct. 2016

👍2

Probado en 2.0 y funcionó como se esperaba: https://jsfiddle.net/dycmgzcm/
Así que estoy marcando esto como un error de 1.x

fnlctrl en 2 oct. 2016

👍2

Cerrar los problemas de 1.x como 1.x ahora está al final de su vida útil y solo recibirá parches de seguridad críticos.