internet-explorer - Vue.js 严格模式下不允许多个属性定义

Question

美好的一天。

我们正在使用 Vuejs/Vuex/vue-router 使用 https://github.com/vuejs/vue-hackernews-2.0 构建我们的应用程序

当使用 IE11 构建和查看我们的应用程序时，我们得到一个 SCRIPT1046: Multiple definitions of a property not allowed in strict mode 并且它引用编译的 app.[#hash].js 文件。我已在组件中跟踪到以下重复属性:

<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"
                                :checked="selectedGender === 'FEMALE'" 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"
                                :checked="selectedGender === 'MALE'" name="gender"
                                type="radio" value="MALE" v-model="selectedGender">
                    </span> Male
            </label>
        </li>
    </ul>
</div>

编译文件中对这些的唯一引用是:

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

我在编译文件中找不到对象中可能存在重复属性的其他任何地方。有人见过这个吗？我们是否在组件中做错了什么才能这样做？

谢谢，如有任何帮助，我们将不胜感激。

Answer 1

你不能同时使用 v-model 和 :checked。添加 v-model="selectedGender"时，您为其提供了一种根据 selectedGender 的值确定选中状态的方法。这导致它创建了这段代码:

checked: t._q(t.selectedGender, "MALE")

当您还添加 :check="selectedGender === 'FEMALE'"时，您导致它添加了另一种方式来设置选中状态:

checked: "FEMALE" === t.selectedGender,

你不能两者兼得。只需删除 :checked= 即可解决此问题。