Vue.js严格模式下不允许属性的多个定义 [英] Vue.js Multiple definitions of a property not allowed in strict mode

问题描述

美好的一天.

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

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

When building and viewing our application using IE11 we get a SCRIPT1046: Multiple definitions of a property not allowed in strict mode and it references the compiled app.[#hash].js file. I have tracked the duplicate property to the following in the component:

<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>

在编译文件中对此的唯一引用是:

The only reference in the compiled file to these are:

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

我无法在编译文件中的其他任何地方找到对象中可能存在重复属性的地方.有人看过吗?为此，我们在组件中做错了吗?

I cannot find anywhere else in the compiled file where there might be duplicated properties in an object. Has anyone seen this? Are we doing something wrong in the component for it to be doing this?

感谢您的协助.

推荐答案

您不能同时使用v-model和:checked.添加v-model ="selectedGender"时，您提供了一种基于selectedGender值确定检查状态的方法.这导致它创建以下代码:

You can't use v-model and :checked at the same time. When you added v-model="selectedGender", you provided it a way to determine the checked status based on the value of selectedGender. That caused it to create this code:

已选中:t._q(t.selectedGender，"MALE")

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

当您还添加了:check ="selectedGender ==='FEMALE'"时，您使它添加了另一种设置检查状态的方法:

When you also added :check="selectedGender === 'FEMALE'" you caused it to add this other way to set the checked status:

选中:女性" === t.selectedGender，

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

您不能同时拥有两者.只需删除:checked =即可解决此问题.

You can't have both. Just remove the :checked= to fix this.

这篇关于Vue.js严格模式下不允许属性的多个定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！