Vue: A propos du bug de la valeur native de la case à cocher?

Créé le 11 janv. 2017 · 7Commentaires · Source: vuejs/vue

Salut.
J'ai rencontré un problème très étrange concernant les cases à cocher.

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

Tout d'abord, j'ai tapé T[0].active=true dans la console, et la première case a été cochée normalement, mais lorsque j'ai actualisé le navigateur, j'ai sélectionné manuellement la première case, puis j'ai tapé T[0].active=false . La première case à cocher ne sera pas décochée, mais la seconde peut toujours être définie normalement (vrai / faux) via la console.

Essayé 2.1.0 et 2.1.8, les résultats sont les mêmes, la version chrome est 54.0.2824.2

bug

Source

moersing

Commentaire le plus utile

Cela a été corrigé via # 4639

yyx990803 le 11 janv. 2017

👍3

Tous les 7 commentaires

Pour rendre des éléments dom avec état (entrée, etc.) avec v-for, vous devez ajouter l'attribut key pour vous assurer que l'état est correct.
https://cn.vuejs.org/v2/guide/list.html#key

Ce mode par défaut est valide, mais s'applique uniquement à la sortie de rendu de liste qui ne dépend pas de l'état du sous-composant ou de l'état temporaire du DOM (par exemple: les valeurs d'entrée de formulaire).

fnlctrl le 11 janv. 2017

@fnlctrl Merci pour votre réponse, mais peut-être que je ne l'ai pas décrite clairement. J'ai ajouté la clé comme vous l'avez dit, et le résultat est le même. Il y a une autre preuve que ce que j'ai dit est que dans chrome 55.0.2883.95 sous Mac, Peu importe si la clé est ajoutée ou non, elle peut être définie normalement.

moersing le 11 janv. 2017

Impossible de se reproduire. https://jsfiddle.net/1b7cux60/

fnlctrl le 11 janv. 2017

@fnlctrl cliquez sur le premier avant 3 secondes pour en faire l'état sélectionné
https://jsfiddle.net/1b7cux60/5/

moersing le 11 janv. 2017

Continuez à le tester, il y a effectivement un problème
https://jsfiddle.net/Lu3o86wt/
Le statut de la case à cocher du dernier clic sera incorrect

Le dernier clic <input> restera dans le mauvais état

Chrome

Bord

fnlctrl le 11 janv. 2017

@fnlctrl Ce n'est pas un bogue en fait. Cela arrive parce que la case à cocher est toujours ciblée, nous ne la mettons pas à jour exprès. Au moins, cela a du sens pour les entrées de texte, nous voudrons peut-être reconsidérer pour d'autres entrées