Vue: 关于checkbox 原生值的bug?

Created on 11 Jan 2017  ·  7Comments  ·  Source: vuejs/vue

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

bug

Most helpful comment

This has been fixed via #4639

All 7 comments

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

Edge
b

@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

This has been fixed via #4639

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gkiely picture gkiely  ·  3Comments

wufeng87 picture wufeng87  ·  3Comments

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comments

paceband picture paceband  ·  3Comments

hiendv picture hiendv  ·  3Comments