Hi.
我遇到一个很奇怪的问题,关于checkbox 的。
<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
, 第一个checkbox正常选中,但是,当我刷新浏览器之后,手动把第一个checkbox选中,然后输入 T[0].active=false
,这时,第一个checkbox将不会取消选中,而第二个还是可以通过控制台正常设置(true/false)。
尝试了2.1.0和2.1.8 都是一样的结果,chrome版本是 54.0.2824.2
用v-for渲染有状态的dom元素(input等),需要加key属性才能保证状态正确。
https://cn.vuejs.org/v2/guide/list.html#key
这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入值)的列表渲染输出。
@fnlctrl 感谢您的回复,但是也许是我没有描述清楚,我按照您说的加上key,还是一样的结果,还有另一个可以证明我所说的就是, 在 Mac 下的chrome 55.0.2883.95 中,无论加上key与否,都可以正常的设置。
@fnlctrl 在3秒之前先点击第一个,让它变成选中状态
https://jsfiddle.net/1b7cux60/5/
继续测试了一下 的确有问题
https://jsfiddle.net/Lu3o86wt/
最后一个点击的checkbox 状态会出错
The last clicked <input>
will remain in the wrong state
Chrome
Edge
@fnlctrl实际上这不是一个错误。 发生这种情况是因为该复选框仍处于焦点状态,因此我们没有故意对其进行更新。 至少对于文本输入有意义,我们可能要重新考虑其他输入
已通过#4639解决此问题
最有用的评论
已通过#4639解决此问题