こんにちは。
チェックボックスに関して非常に奇妙な問題が発生しました。
<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です。
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>
は間違った状態のままになります
クロム
縁
@fnlctrlこれは実際にはバグではありません。 これは、チェックボックスがまだフォーカスされているために発生します。意図的に更新していません。 少なくともテキスト入力には意味がありますが、他の入力についても再検討する必要があるかもしれません
これは#4639で修正されました
最も参考になるコメント
これは#4639で修正されました