input单选框在iphone6手机系统ios10选择bug

bug描述

input单选框在iphone6手机系统ios10选择bug。
手机在选择的时候竟然可以同时选择多个。代码如下

<label class="label" v-for="(item, index) in values"
            :key="index">
    <input class="input-radio" :value="item.sex"
          :checked="sex === item.sex"
          @input="modifySex(item.sex)" type="radio">{{item.name}}
</label>

input事件

经调查，原来是input事件的问题，mdn上是这么定义的

当一个 <input>, <select>, 或 元素的 value 被修改时，会触发 input 事件。对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 change 事件代替这些类型的元素。

我这里是一个input元素，在切换选择的时候其实修改的是他的checked属性，他的value按道理会改变，但是没有触发input事件，用change事件代理即可。

修改之后代码

<label class="label" v-for="(item, index) in values"
            :key="index">
   <input class="input-radio" :value="item.sex"
        :checked="sex === item.sex"
       @change="modifySex(item.sex)" type="radio">{{item.name}}
</label>

change事件

change 事件被<input>, <select>, 和<textarea> 元素触发, 当用户提交对元素值的更改时。与 input 事件不同，change 事件不一定会对元素值的每次更改触发。

事件触发取决于表单元素的类型（type）和用户对标签的操作:

• 当元素被:checked时（通过点击或者使用键盘）： 和 ；
• 当用户完成提交动作时（例如：点击了 中的一个选项，从 标签选择了一个日期，通过标签上传了一个文件，等)；
• 当标签的值被修改并且失焦后，但并未进行提交（例如：对 或者的值进行编辑后。）。

总结

以后注意使用选择类input元素使用change事件较为合理。