Vue: チェックボックスのネイティブ値のバグについては?

作成日 2017年01月11日  ·  7コメント  ·  ソース: vuejs/vue

こんにちは。
チェックボックスに関して非常に奇妙な問題が発生しました。

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

最初に、コンソールにT[0].active=trueと入力し、最初のチェックボックスが通常どおり選択されましたが、ブラウザーを更新するときに、最初のチェックボックスを手動で選択してから、 T[0].active=false 。このとき、最初のチェックボックスはオフになりませんが、2番目のチェックボックスはコンソールから通常どおり(true / false)設定できます。

2.1.0と2.1.8を試してみましたが、結果は同じで、クロムバージョンは54.0.2824.2です。

bug

最も参考になるコメント

これは#4639で修正されました

全てのコメント7件

v-forを使用してステートフルdom要素(入力など)をレンダリングするには、キー属性を追加して、状態が正しいことを確認する必要があります。
https://cn.vuejs.org/v2/guide/list.html#key

このデフォルトモードは有効ですが、サブコンポーネントの状態や一時的なDOM状態(フォームの入力値など)に依存しないリストレンダリング出力にのみ適用されます。

@fnlctrl返信ありがとうございますが、はっきりと説明していなかったかもしれません。あなたが言ったようにキーを追加しましたが、結果は同じです。私が言ったことは、Macのクロム55.0.2883.95であるという別の証拠があります。キーを追加するかどうかに関係なく、正常に設定できます。

再現できません。 https://jsfiddle.net/1b7cux60/

@fnlctrl 3秒前に最初のものをクリックして、選択した状態にします
https://jsfiddle.net/1b7cux60/5/

それをテストし続けてください、確かに問題があります
https://jsfiddle.net/Lu3o86wt/
ラストクリックのチェックボックスステータスが間違っています

最後にクリックした<input>は間違った状態のままになります

クロム
a


b

@fnlctrlこれは実際にはバグではありません。 これは、チェックボックスがまだフォーカスされているために発生します。意図的に更新していません。 少なくともテキスト入力には意味がありますが、他の入力についても再検討する必要があるかもしれません

これは#4639で修正されました

このページは役に立ちましたか?
0 / 5 - 0 評価