IE11环境下Vue项目出现Strict Mode属性重复定义错误求助

我之前碰到过一模一样的问题！根源在于你在单选框元素上同时使用了**v-model和:checked**这两个指令——这在Vue里是重复且冲突的写法，直接导致编译后的代码生成了重复的checked属性，而IE11对严格模式下的重复对象属性检查非常严格，于是抛出了<SCRIPT1046>错误。

问题拆解 #

Vue的v-model已经自动封装了单选框的选中状态绑定逻辑：当你给单选框设置v-model="selectedGender"时，Vue会根据selectedGender的当前值，自动为匹配的单选框设置checked属性。而你手动添加的:checked="selectedGender === 'XXX'"相当于重复告诉Vue要设置同一个checked属性，编译后自然就出现了像这样的重复代码：

domProps: { checked: "MALE" === t.selectedGender, checked: t._q(t.selectedGender, "MALE") }

解决方案 #

只需要保留v-model，删掉所有手动绑定的:checked即可。修改后的组件代码如下：

<div class="form-group form-group-list">
  <label aria-labelledby="Shopping preference">Shopping preference</label>
  <ul class="inline">
    <li>
      <label for="users__secondary_signup__gender__female" aria-labelledby="Gender female">
        <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'FEMALE' }">
          <input 
            id="users__secondary_signup__gender__female" 
            class="enhance-radio" 
            name="gender" 
            type="radio" 
            value="FEMALE" 
            v-model="selectedGender"
          >
        </span>
        Female
      </label>
    </li>
    <li>
      <label for="users__secondary_signup__gender__male" aria-labelledby="Gender male">
        <span class="enhanced-radio" :class="{ 'selected': selectedGender === 'MALE' }">
          <input 
            id="users__secondary_signup__gender__male" 
            class="enhance-radio" 
            name="gender" 
            type="radio" 
            value="MALE" 
            v-model="selectedGender"
          >
        </span>
        Male
      </label>
    </li>
  </ul>
</div>

补充说明 #

你完全可以保留<span>上的:class绑定来控制自定义单选框的选中样式，这部分逻辑和v-model不冲突，因为它只是基于selectedGender的值做样式判断，并没有重复操作表单元素的原生属性。

重新编译项目后，生成的app.[hash].js里就不会再出现重复的checked属性，IE11的错误也会随之消失。Vue的表单绑定已经做了足够的封装，尽量避免手动操作表单元素的原生属性，能有效减少这类兼容性问题。

内容的提问来源于stack exchange，提问作者Wilco