Vue: <select>vinculado ao array funciona incorretamente após splice ()</select>

Criado em 30 set. 2016 · 6Comentários · Fonte: vuejs/vue

Considere o seguinte código:

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

Em <select> , cada valor de opção está vinculado a $index . Se executarmos splice() em options , como, options.splice(0,1) , $index não sincroniza corretamente com as opções.

Por exemplo, deixe options=['a','b'] e o HTML renderizado se parecerá (mas não realmente):

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

Depois de options.splice(0,1) , então options=['b'] , mas o HTML renderizado se torna:

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

O valor da opção 'b' não se torna 1, que deveria ser 0 por causa de $index . Pode não ser um bug, mas é meio estranho.

Abaixo está a demonstração ao vivo deste problema:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

Fonte

peteranny

Comentários muito úteis

Testado em 2.0 e funcionou como esperado: https://jsfiddle.net/dycmgzcm/
Estou marcando isso como um bug de 1.x

fnlctrl em 2 out. 2016

👍2

Todos 6 comentários

Basta adicionar um atributo selecionado em seu modelo selected="{{$index == selected}}"

Eu atualizo a demonstração aqui https://jsfiddle.net/trwp98g9/5/

defcc em 1 out. 2016

👍1

@peteranny Você pode esclarecer qual era o comportamento esperado?

Depois de options.splice (0,1), então options = ['b'], mas o HTML renderizado se torna:
<option value="1">b</option>

Não estou obtendo o mesmo resultado que você forneceu aqui:
Antes de clicar em remover:
before

Depois de clicar em:
after

O valor da opção 'b' não se torna 1, que deveria ser 0 por causa do $ index

Então, o que exatamente deveria se tornar? O valor de 'b' era 1 antes do clique e passou a 0 após o clique.

fnlctrl em 1 out. 2016

@fnlctrl Hum, obrigado por seus testes. Acho que fiz a pergunta errada.
De acordo com seu teste, o valor de 'b' se tornou 0 após o clique.

Minha verdadeira pergunta é: agora que o valor de 'b' era 0, por que <select> não selecionou 'b' de qualquer maneira?
Como pode ser visto em sua imagem, <select> não selecionou nenhuma opção, enquanto <select> deve selecionar a opção com o valor 0.
(E é por isso que imaginei erroneamente que o valor de 'b' não mudou.)

peteranny em 2 out. 2016

@peteranny Pode ser um bug porque selected permaneceu 0 enquanto options mudou, e o dom deve refletir esta mudança, mas não tenho certeza ..

Por enquanto, você pode tentar adicionar selected prop como @defcc sugeriu, (observe que a vinculação de bigode para props / attrs está obsoleta no 2.0, então use :selected="$index == selected" vez disso)
Ou você pode adicionar track-by prop a <options> , o que provavelmente fez vue pensar que é seguro atualizar o valor selecionado no dom. https://jsfiddle.net/74ncq90w/

fnlctrl em 2 out. 2016

👍2

Testado em 2.0 e funcionou como esperado: https://jsfiddle.net/dycmgzcm/
Estou marcando isso como um bug de 1.x

fnlctrl em 2 out. 2016

👍2

Fechar os problemas do 1.x como 1.x agora é o fim da vida útil e receberá apenas patches de segurança críticos.