Vue.js 严格模式下不允许属性的多个定义答案

【问题标题】：Vue.js Multiple definitions of a property not allowed in strict modeVue.js 严格模式下不允许属性的多个定义
【发布时间】：2018-05-24 15:21:49
【问题描述】：

美好的一天。

我们正在使用 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")
},

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

谢谢，感谢您的帮助。

【问题讨论】：

您很可能在代码中两次添加了具有相同键的道具。当您有两个名称相同的键时，就会出现此问题。前段时间有same issue

标签： internet-explorer webpack vue.js vue-router vuex

【解决方案1】：

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

选中：t._q(t.selectedGender, "MALE")

当您还添加 :check="selectedGender === 'FEMALE'" 时，您会导致它添加这种其他方式来设置选中状态：

选中：“FEMALE”=== t.selectedGender，

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

【讨论】：

我不知道 v-model 和 :checked 不能存在于同一个标签中。这为我正确解决了 IE11 的问题
我也没有，直到我自己做了，然后花了很多时间弄清楚发生了什么。

【解决方案2】：

以@Charles 的回答为基础，其他重复属性也是如此。例如，您不能声明 :value="myProperty" 和 value="true"，因为它会创建查尔斯回答中提到的类似代码。

只需删除重复的属性即可解决此类问题。

【讨论】：