Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于checkbox 原生值的bug? #4690

Closed
moersing opened this issue Jan 11, 2017 · 7 comments
Closed

关于checkbox 原生值的bug? #4690

moersing opened this issue Jan 11, 2017 · 7 comments
Labels

Comments

@moersing
Copy link

moersing commented Jan 11, 2017

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

@fnlctrl
Copy link
Member

fnlctrl commented Jan 11, 2017

用v-for渲染有状态的dom元素(input等),需要加key属性才能保证状态正确。
https://cn.vuejs.org/v2/guide/list.html#key

这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入值)的列表渲染输出。

@fnlctrl fnlctrl closed this as completed Jan 11, 2017
@moersing
Copy link
Author

@fnlctrl 感谢您的回复,但是也许是我没有描述清楚,我按照您说的加上key,还是一样的结果,还有另一个可以证明我所说的就是, 在 Mac 下的chrome 55.0.2883.95 中,无论加上key与否,都可以正常的设置。

@fnlctrl
Copy link
Member

fnlctrl commented Jan 11, 2017

不能重现。 https://jsfiddle.net/1b7cux60/

@moersing
Copy link
Author

@fnlctrl 在3秒之前先点击第一个,让它变成选中状态
https://jsfiddle.net/1b7cux60/5/

@fnlctrl
Copy link
Member

fnlctrl commented Jan 11, 2017

继续测试了一下 的确有问题
https://jsfiddle.net/Lu3o86wt/
最后一个点击的checkbox 状态会出错

The last clicked <input> will remain in the wrong state

Chrome
a

Edge
b

@posva
Copy link
Member

posva commented Jan 11, 2017

@fnlctrl This is not a bug actually. It happens because the checkbox is still focused we don't update it on purpose. At least it makes sense for text inputs, we may want to reconsider for other inputs

@yyx990803
Copy link
Member

This has been fixed via #4639

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants