Vue: 关于checkbox 原生值的bug?

创建于 2017-01-11  ·  7评论  ·  资料来源: 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

最有用的评论

已通过#4639解决此问题

所有7条评论

用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实际上这不是一个错误。 发生这种情况是因为该复选框仍处于焦点状态,因此我们没有故意对其进行更新。 至少对于文本输入有意义,我们可能要重新考虑其他输入

已通过#4639解决此问题

此页面是否有帮助?
0 / 5 - 0 等级