Vue: Sobre o bug do valor nativo da caixa de seleção?

Criado em 11 jan. 2017 · 7Comentários · Fonte: vuejs/vue

Oi.
Eu encontrei um problema muito estranho sobre as caixas de seleção.

<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>

Primeiro, digitei T[0].active=true no console e a primeira caixa de seleção foi marcada normalmente, mas quando atualizei o navegador, marquei manualmente a primeira caixa de seleção e digitei T[0].active=false . Neste momento, A primeira caixa de seleção não será desmarcada, mas a segunda ainda pode ser definida normalmente (verdadeiro / falso) através do console.

Tentei 2.1.0 e 2.1.8, os resultados são os mesmos, a versão do cromo é 54.0.2824.2

bug

Fonte

moersing

Comentários muito úteis

Isso foi corrigido por meio do # 4639

yyx990803 em 11 jan. 2017

👍3

Todos 7 comentários

Para renderizar elementos dom com estado (entrada, etc.) com v-for, você precisa adicionar o atributo key para garantir que o estado esteja correto.
https://cn.vuejs.org/v2/guide/list.html#key

Este modo padrão é válido, mas se aplica apenas à saída de renderização de lista que não depende do estado do subcomponente ou do estado temporário do DOM (por exemplo: valores de entrada do formulário).

fnlctrl em 11 jan. 2017

@fnlctrl Obrigado pela sua resposta, mas talvez eu não tenha descrito claramente. Eu adicionei a chave como você disse e o resultado é o mesmo. Há outra prova de que o que eu disse é que no Chrome 55.0.2883.95 no Mac, Não importa se a chave é adicionada ou não, ela pode ser definida normalmente.

moersing em 11 jan. 2017

Não pode reproduzir. https://jsfiddle.net/1b7cux60/

fnlctrl em 11 jan. 2017

@fnlctrl clique no primeiro antes de 3 segundos para torná-lo o estado selecionado
https://jsfiddle.net/1b7cux60/5/

moersing em 11 jan. 2017

Continue testando, realmente há um problema
https://jsfiddle.net/Lu3o86wt/
O status da caixa de seleção do último clique estará errado

O último <input> clicado permanecerá no estado errado

cromada

Beira

fnlctrl em 11 jan. 2017

@fnlctrl Na verdade, não é um bug. Isso acontece porque a caixa de seleção ainda está focada, não a atualizamos de propósito. Pelo menos faz sentido para entradas de texto, podemos querer reconsiderar para outras entradas