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
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
Borde
@fnlctrl En
Esto se ha solucionado a través de # 4639
Comentario más útil
Esto se ha solucionado a través de # 4639