Vue: ¿Sobre el error del valor nativo de la casilla de verificación?

Creado en 11 ene. 2017  ·  7Comentarios  ·  Fuente: vuejs/vue

Hola.
Encontré un problema muy extraño con las casillas de verificación.

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

Primero, escribí T[0].active=true en la consola, y la primera casilla de verificación se seleccionó normalmente, pero cuando actualicé el navegador, seleccioné manualmente la primera casilla de verificación y luego escribí T[0].active=false . En este momento, La primera casilla de verificación no estará desmarcada, pero la segunda aún se puede configurar normalmente (verdadero / falso) a través de la consola.

Probé 2.1.0 y 2.1.8, los resultados son los mismos, la versión de Chrome es 54.0.2824.2

bug

Comentario más útil

Esto se ha solucionado a través de # 4639

Todos 7 comentarios

Para representar elementos dom con estado (entrada, etc.) con v-for, debe agregar el atributo clave para asegurarse de que el estado sea correcto.
https://cn.vuejs.org/v2/guide/list.html#key

Este modo predeterminado es válido, pero solo se aplica a la salida de representación de listas que no depende del estado del subcomponente o del estado temporal del DOM (por ejemplo: valores de entrada de formulario).

@fnlctrl Gracias por tu respuesta, pero tal vez no lo describí claramente.

No se puede reproducir. https://jsfiddle.net/1b7cux60/

@fnlctrl haga clic en el primero antes de 3 segundos para convertirlo en el estado seleccionado
https://jsfiddle.net/1b7cux60/5/

Continúe probándolo, de hecho hay un problema
https://jsfiddle.net/Lu3o86wt/
El estado de la casilla de verificación del último clic será incorrecto

El último <input> en el que se hizo clic permanecerá en el estado incorrecto

Cromo
a

Borde
b

@fnlctrl En

Esto se ha solucionado a través de # 4639

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

finico picture finico  ·  3Comentarios

seemsindie picture seemsindie  ·  3Comentarios

aviggngyv picture aviggngyv  ·  3Comentarios

bfis picture bfis  ·  3Comentarios

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comentarios